I have a table if i am clicking on any of the row in a table, it will display more detailed information about the row in right side of the table.
I have declared Boolean variable declared on the ts and i will set to true or false.
Now the problem is, If i click on the 1st row, it will fetch the details and display it. If i click on either 1st row or any row in the table previously displayed details on the right wont be displayed.
Actually what i want to do is, i click on 1st row , it should display the details. If i click on anyother row, previously shown details should be hided, and new details should be displayed. How can i achieve this by using only angular 7 & typescript.
ts:
show = false;
details(id:number){
this.show= !this.show;
//inject service to fetch the data
}
<div class="row">
<div class="col-md-5">
<table>
<tbody>
<tr *ngFor="let order of Orders" (click)="details(order.id)"
class='clickable-row'>
<td> //display details </td>
</tr>
</tbody>
</table>
</div>
<div class= "col-md-6">
<div *ngIf="show">
<mat-card>
<mat-card-content>
//display details here
</mat-card-content>
</mat-card>
</div>
</div>
I suggest you build a child component in the current component just for displaying the details the pass the details of the particular row down to the child component using property binding that way you will have access to it when you use #input() in the child component. It will change each time since angular will do the tougher job for you at the background
Use Property Interpolation.
<div class= "col-md-6">
<div *ngIf="show">
<mat-card>
<mat-card-content>
{{RowDetails}}
</mat-card-content>
</mat-card>
</div>
</div>
In your .ts file, have a property called RowDetails initialized as an empty string(or w/e). In the onClick event, set RowDetails to the details for that row.
Related
I want to display the items out of my class in div-containers.
my code looks like this:
List<Produkte> PListe = Produkte.Anzeige(wert);
div class="row">
{
foreach (var item in PListe)
{
<div class="col-md-3">
<figure class="figure">
<img src="~/pictures/#(item.name).jpg" alt="#item.name">
<figcaption class="figure-caption"> #item.name </figcaption>
</figure>
</div>
}
</div>
}
it should be two rows with each 4 items. but the problem is in the second row the div-container shift and get displayed wrong: after the first picture in the second row is a big gap (empty divs?!) and then it goes on with the other pictures.
can you help me to solve this?
im a total beginner in this so please lots of explaining
I have multiple checkboxes binded from ViewBag list. I have used this pattern while Add Record. But now I have situation of Edit . I have saved the selected checkbox IDs in different table. Now in Edit,how I can make them selected as per user selection done while adding that record?
#foreach (var item in ViewBag.Features)
{
<div class="form-group form-animate-checkbox col-md-4 col-sm-12">
<input type="checkbox" class="checkbox Amenities" value="#item.ID" name="#item.Name">
<label class="lblamenities">#item.Name</label>
</div>
}
In ViewBag.Features is list type variable, this contain the id and name, but in your requirement you need to select those check box previous you save.
So you can take another parameter or variable selected as bool type, those id are saved in our database the selected variable is true otherwise false.
In view page make check for checked or not, Plz see the below code....
#foreach (var item in ViewBag.Features)
{
<div class="form-group form-animate-checkbox col-md-4 col-sm-12">
<input type="checkbox" class="checkbox Amenities" value="#item.ID" name="#item.Name" checked='#(item.selected?"checked":"")'>
<label class="lblamenities">#item.Name</label>
</div>
}
Here I've a portion of code which I don't want to show in the user interface.
<div class="form-group">
<label for="customer_id" class="col-sm-4 control-label">{{trans('sale.customer')}}</label>
<div class="col-sm-8">
{!! Form::select('customer_id', $customer, Input::old('customer_id'), array('class' => 'form-control')) !!}
</div>
</div>
I want this section to be hidden. Laravel form has form::hidden() method to do this but how can I apply this in my form::select() method.
Thanks in advance.
If you need to hide entire "form-group" div from UI add css property style="display:none" to "form-group" div. and also if you don't want customer_id field in request add 'disabled'=>true to array of 4th parameter after class.
I have below view which generates PDF invoice using MvcRazorToPdf library
<table border="0">
<tr>
<td>
<h1>Company Name </h1>
</td>
<td>
<div style="text-align:right;margin-right:0px;">
Invoice
</div>
</td>
</tr>
</table>
<hr/>
<div>
#Model.InvoiceNum
</div>
Above code generates below view in pdf
But how much ever I style the above div within td for invoice, I am not able to move the Invoice text to the right side of the pdf. I've tried adding link to bootstrap.css which doesn't work either. Anyone have any solution for this? Has anyone worked on styling the pdf with MvcRazorToPdf librabry?
Your text alignment is being respected, its just that by default, you table and its cells will be collapsed to fit the content (easy to check by using your browser tools to inspect the elements).
Give your table (or its cells a width), for example
<table style="width:100%;">
However, using <table> elements is not good practice (refer Why not use tables for layout in HTML? and Why Tables Are Bad (For Layout*) Compared to Semantic HTML + CSS.). Instead you can use floats or relative/absolute positioning, for example
<div style="position:relative;">
<h1>Company Name</h1>
<span style="position:absolute;right:0;bottom:0">Invoice</span>
</div>
or
<div>
<h1 style="display:inline-block">Company Name</h1>
<div style="float:right;margin-top:40px;">Invoice</div>
</div>
Can jquery mobile support such feature:
let's say there is a grid like 2 rows x 2 columns, it is shown as:
<table>
<tr>
<th>ID</th>
<th>Name</th>
</tr>
<tr>
<td>ID1</td>
<td>Name1</td>
</tr>
<tr>
<td>ID2</td>
<td>Name2</td>
</tr>
</table>
ID, NAME
ID1, NAME#1
ID2, NAME2
, now I expect the grid is shown single row every time and there is a navigation slider to locate which row will be shown, i.e. let's move navigation slider to row 2, then row #2 will be shown in same effects as below codes (all columns are shown in rows):
<table>
<tr>
<td>ID :</td>
<td>ID1</td>
</tr>
<tr>
<td>Name :</td>
<td>Name#1</td>
</tr>
</table>
now for single row, it looks like:
ID: ID1
NAME: NAME1
, with a mobile device when user want to edit a row of a grid, the space is too small, I want to change to show selected row only and change layout of a record from landscape to portrait. After user finished editing, we can click another button to restore layout to HTML table style (multiple rows)
Have jQuery mobile provides such feature?
jQuery Mobile does not provide this functionality out-of-the-box. You would have to code it yourself. You might consider another option which is to add an edit button to each row of the table. Then when the user clicks the edit button, launch a jQM popup with the edit controls.
For each row in the table, add a cell with a button:
<tr>
<td class="editBtn">No text
</td>
<td>ID1</td>
<td>Name1</td>
</tr>
Add your edit form to the page same level as (header, footer, content):
<div data-role="popup" id="popupEdit" data-theme="a" class="ui-corner-all" data-dismissible="false">
<div class="ui-content">
<p>You are editing the row with ID: <strong id="editRow"></strong>
</p>
<hr />
<label for="txtID">ID:</label>
<input type="text" name="txtID" id="txtID" value="" />
<label for="txtName">Name:</label>
<input type="text" name="txtName" id="txtName" value="" />
<fieldset class="ui-grid-a">
<div class="ui-block-a">
<input type="button" value="OK" data-theme="b" class="popupbutton" />
</div>
<div class="ui-block-b">
<input type="button" value="Cancel" data-theme="a" class="popupbutton" />
</div>
</fieldset>
</div>
</div>
Add a click handler for the row edit button:
$("#MyTable .editBtn a").on("click", function () {
//get row id
var rowid = $(this).jqmData("rowid");
$("#editRow").text(rowid);
var $rowCells = $(this).closest("tr").find("td");
var curID = $rowCells.eq(1).text();
var curName = $rowCells.eq(2).text();
$("#txtID").val(curID);
$("#txtName").val(curName);
$("#popupEdit").popup("open");
});
In my example, and getting a rowid from a data-attribute, and the current ID and Name from the other row cells. These values are transferred to the popup and then the popup is launched.
DEMO
NOTE: you need to add the code that actually save the values depending on your database/backend server/localstorage/etc.