I have a data table and I'm trying to assign an <a> around a participants name <td> that would take the user when clicked to a new component.
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> Name </th>
<td mat-cell *matCellDef="let Participant"> <a routerlink="/participants/userId">{{Participant.name}}</a> </td>
</ng-container>
It's not showing an error or anything, however, it's not making the <td> clickable, it's completely ignoring the routerLink, if I assign an href to the <a> it works.
One way of handling this will be based on (click) event.
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> Name </th>
<td mat-cell *matCellDef="let Participant">
<span style="cusor:pointer;" (click)="navigate(Participant)">
{{Participant.name}}</span> </td>
</ng-container>
In your typescript code:
private navigate(product){
this.router.navigate(['/participants', product]); //we can send product object as route param
}
Thanks.
You can also use it this way, and userId must be defined as an angular variable.
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> Name </th>
<td mat-cell *matCellDef="let Participant" routerLink="/participants/{{userId}}"> {{Participant.name}}
</td>
</ng-container>
Thanks
Related
I have the table with each row containing checkbox where checkbox value is set as id from the database. How can i access them to controller to update in database. I have tried to dump the value in my controller but it show NULL.
Here is my view:
<form action= "po" method="POST" >
#csrf
<input type="submit" name="submit">
<div class="table-responsive">
<table class="table custom-table">
<thead>
<tr>
<th scope="col">
<label class="control control--checkbox">
<input type="checkbox" class="js-check-all"/>
<div class="control__indicator"></div>
</label>
</th>
<th scope="col" >S.N</th>
<th scope="col">LC NO</th>
<th scope="col">Applicant</th>
<th scope="col">Doc Value</th>
<th scope="col">Doc Received date</th>
<th scope="col">LC Type</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
<?php $number = 1;?>
#foreach($datas as $items)
<tr>
<th scope="row" style="padding:20px">
<label class="control control--checkbox">
<input type="checkbox" name="checkboxlist[]" value="{{$items->id}}" />
<div class="control__indicator"></div>
</label>
</th>
<td>{{$number}}</td>
<td>{{$items->lc_no}}</td>
<td>{{$items->applicant}}</td>
<td>{{$items->doc_value}}</td>
<td>{{$items->rec_date}}</td>
<td>{{$items->sight_usance}}</td>
</tr>
<?php $number++; ?>
#endforeach
</tbody>
</table>
</div>
</form>
Here is my Controller
function po(Request $req){
dd($req->chekboxlist);
}
You are accessing wrong key from Request $req->chekboxlist
But it should be
$req->checkboxlist
Always add Validation to Avoid erorrs while saving data
$validate=Validator::make($request->all(), [
"checkboxlist" => "required|array",
]);
if($validate->fails()){
return redirect()->back()->with("errors",$validate->errors());
}
I am new to Thymeleaf and trying to create a dynamic table on Themeleaf template.
How can I do it..??
I have been googling by I didn't got any proper answer. The issue is I cannot iterate List< Map< String,Object >>. I can have any number of columns and columns name could be any thing.
<tr class="headings">
<th class="column-title">ID</th>
<th class="column-title">Name</th>
<th class="column-title">Salary</th>
<th class="column-title">Status</th>
</tr>
</thead>
<tbody>
<tr class="even pointer" th:each="row:${rows}" id = "tablerow">
<td class=" " th:text="${row.getId()}">Id</td>
<td class=" " th:text="${row.getName()}">Name</td>
<td class=" " th:utext="${row.getSalary()}">Salary</td>
<td class=" " th:text="${row.getStatus()}">Active</td>
</tr>
</tbody>
I need to set values dynamically since if query of result will keep changing . right now column name are hard coded and value are also getting by row.getId what if there is no Id, it could be anything in rows what shall I use than..? example row.<>.
rows is obtained as List< Map< String, Object>>.
Thanks in advance.
You can iterative over a Map just as easily as you can a List. The simplest form of this would be:
<tbody>
<tr class="even pointer" th:each="row: ${rows}" id="tablerow">
<td th:each="field: ${row}" th:text="${field.value}" />
</tr>
</tbody>
However, since Maps don't have a specific ordering (unless you're using something like a TreeMap), the way I would do it would be something like this (complete example should match your example table):
Controller
List<String> headers = Arrays.asList("ID", "Name", "Salary", "Status");
List<Map<String, Object>> rows = new ArrayList<>();
rows.add(Map.of("ID", "1", "Name", "Jim", "Salary", "50000", "Status", "active"));
rows.add(Map.of("ID", "2", "Name", "Sally", "Salary", "50000", "Status", "inactive"));
Template
<table>
<thead>
<tr class="headings">
<th th:each="header: ${headers}" class="column-title" th:text="${header}" />
</tr>
</thead>
<tbody>
<tr class="even pointer" th:each="row: ${rows}" id="tablerow">
<td th:each="header: ${headers}" th:text="${row.get(header)}" />
</tr>
</tbody>
</table>
Which will produce:
<table>
<thead>
<tr class="headings">
<th class="column-title" >ID</th>
<th class="column-title" >Name</th>
<th class="column-title" >Salary</th>
<th class="column-title" >Status</th>
</tr>
</thead>
<tbody>
<tr class="even pointer" id="tablerow">
<td >1</td>
<td >Jim</td>
<td >50000</td>
<td >active</td>
</tr>
<tr class="even pointer" id="tablerow">
<td >2</td>
<td >Sally</td>
<td >50000</td>
<td >inactive</td>
</tr>
</tbody>
</table>
My HTML
<table id="flex1" cellspacing="0" cellpadding="0" border="0">
<thead>
<tr class="hDiv">
<th width="6%">
<div class="text-left field-sorting asc" rel="IFSC_CODE"> IFSC CODE </div>
</th>
<th width="6%">
<div class="text-left field-sorting " rel="BRANCH_NAME"> BRANCH NAME </div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="sorted" width="6%">
<div class="text-left">SACS011151</div>
</td>
<td width="6%">
<div class="text-left">check</div>
</td>
</tr>
<tr class="erow">
<td class="sorted" width="6%">
<div class="text-left">SACS011152</div>
</td>
<td width="6%">
<div class="text-left">Motiram</div>
</td>
</tr>
<tr class="erow">
<td class="sorted" width="6%">
<div class="text-left">SACS011158</div>
</td>
<td width="6%">
<div class="text-left">TESTNAME</div>
</td>
</tr>
</tbody>
</table>
My XPath
//table/tbody/tr/td[count(//table/thead/tr/th[.='BRANCH NAME']/preceding-sibling::th)+4]
Above XPath is Selecting all the column but not selecting its header name 'BRANCH NAME' and I want to select the header name with all its column.Any Idea how to do this?
You can simply use xpath union operator (|) to combine two xpath queries, for example* :
//table/tbody/tr/td[count(//table/thead/tr/th[.='BRANCH NAME']/preceding-sibling::th)+4]
|
//table/thead/tr/th[.='BRANCH NAME']
*: formatted into multiple lines just to make it visible without horizontal scroll
I am tried to create table structure with header,body,footer in listview which works fine.
But in footer which is in layouttemplate, i tried to add below code which gives error.
<LayoutTemplate>
<table class="sampletable" cellpadding="0" cellspacing="0">
<thead class="tableheader">
<tr>
<th>
<a>Samples </a>
</th>
</tr>
</thead>
<tbody class="tablebody">
<tr id="itemplaceHolder" runat="server">
</tr>
</tbody>
<tfoot class="tablefooter">
<tr>
<td>
<a href='<%:Page.GetRouteUrl("samplelist",null) %>'>more sample</a>
</td>
</tr>
</tfoot>
</table>
</LayoutTemplate>
Is it not allowed to place in layouttemplate?
The error is
"The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>)."
Use the 'RouteUrlExpressionBuilder'.
Link
Properly documented at MSDN.
I am using watij to automate my UI testing. I have many tables in a webpage. I need to find a table which has a width 95%. It contains many rows. I have to find each row with different text say "running first UI test on local" as below adn need to get the td value "Complete". I am not ble to get the value but I get the watij address. Let me know how I can find this.
<table width=95%>
<tr>
<th align="left">
<span id="lblHeaderComponent" style="font-size:10pt;font-weight:bold;">Component</span>
</th>
<th align="left">
<span id="lblHeaderServer" style="font-size:10pt;font-weight:bold;">Server</span>
</th>
<th align="left">
<span id="lblHeaderStatus" style="font-size:10pt;font-weight:bold;">
</span>
</th>
</tr>
<tr>
<td align="left"
nowrap="nowrap" style="font-size:12px;">running first UI test on local</td>
<td align="left" style="font-size:12px;">Google</td>
<td align="left" style="font-size:12px;">
<a style='color:#336600;'>Complete</a>
</td>
</tr>
<tr>
<td align="left"
style="border-top:1px solid #cfcfcf;border-bottom:1px solid #cfcfcf;"
colspan="3"
style="font-size:12px; color:#ff3300;">
</td>
</tr>
<tr>
<td align="left" nowrap="nowrap" style="font-size:12px;">running second UI test on local</td>
<td align="left" style="font-size:12px;">Google</td>
<td align="left" style="font-size:12px;">
<a style='color:#336600;'>Complete</a>
</td>
</tr>
</table>
You can try an xpath visualizer like this one to assist you in getting the right expression. It lets you see the results visually.
Using XPath on HTML assumes the HTML is XHTML - in other words it must be well-formed XML.