How to generate a dynamic data table with dynamic rows and columns?
The rows and columns are dynamic based on backend values. The 2,3,4 columns will be a list of semester-subject combination list to store the selected value.
I know this can be achieved with primefaces. But is there a way to not use any libraries but achieve this with jsf 2.2?
My code is generating the semester-subject list in all one row.
<table>
<thead>
<tr>
<th>Enrollment</th>
<c:forEach items="#{semesterTO.getSubjects()}" varStatus="loop"
var="subjects" id="subjectsId">
<th>#{subjects.Name}</th>
</c:forEach>
</tr>
</thead>
<tbody>
<c:forEach items="#{semesterTO.getSemesters()}" var="semester"
varStatus="status1">
<tr>
<td><h:outputText value="#{semester.semesterId}" /></td>
</tr>
</c:forEach>
<c:forEach items="#{semesterTO.subjectSemesterList()}" var="a"
varStatus="status2">
<tr>
<td><h:selectBooleanCheckbox
value="#{semesterTO.enrolledSubjects[a]}" /></td>
</tr>
</c:forEach>
</tbody>
</table>
You can use datatables. Follow this tutorial
https://www.mkyong.com/jsf2/jsf-2-datatable-example/
or you can google another one, there are plenty :)
Related
Currently, I am working on Kendo-grid, with Thymleaf. I am facing an issue, I'm trying to use multiple languages in the kendo grid table. Whenever I try to apply different language on the grid, <thead> header tag is coming up with applied language but it seems that data not displayed in grid <tbody>. Grid table shows data properly when I apply the English language.
<table>
<thead >
<tr>
<th><span th:text="#{user_name}" th:remove="tag"></span></th>
<th><span th:text="#{first_name}" th:remove="tag"></span></th> </tr>
</thead>
<tbody>
<tr th:each="user : ${users}" th:object="${user}" th:classappend="${isDeleted} ? item-deleted : ''"> <td th:text="${user.username}"></td>
<td th:text="${user.firstname}"></td> </tr>
</tbody>
</table>
I am using the PageObject gems to test Salesforce which is chock full of tables within tables. I wanted to know if anyone has used a specific technique to access cells within nested tables (see example below).
I want to access THE LINK inside the cell with the cell labeled id="desired_item"
Thanks in advance.
<table id="bodyTable" class="outer">
<tbody>
<tr>
<td id="blah">
<div>
<table class="detailList">
<tbody>
<td>
<tr>
<td id="desired_item">
<a>Click_Me_Link</a>
</td>
</tr>
</td>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
Since the parent cell of the link has an ID, you can easily find that cell. From there, you simply get the first link in the cell.
page.cell_element(id: 'desired_item').link_element
I'm stumped on why and how to do this query.
My html structure is like this (tables nested inside tables):
<root>
<table>
</table>
<table>
<tr>
<td>
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</td>
</tr>
</table>
</root>
If I start out my xpath like:
var tables = blah.SelectNodes("//table");
which returns me the 3 parent tables, then I want to select the td's from the 2nd tr like this:
var td = tables[2].SelectNodes("//tr[2]/td");
But, when I do this, it goes back to the parent/root, the "blah" level. Why is this, and how can I keep filtering my search results down?
Note: The example xml structure may not directly match the queries written, just trying to give a general idea...
Just keep extending the XPath
This one returns the <tr> items (four of them) of the second table:
/table/tr/td/table/tr
This one returns the second <tr> item:
/table/tr/td/table/tr[2]
Your best bet, though, is to give individual id attributes to each table, so that you can find it directly using that attribute.
Using something like this:
<root>
<table id="1">
</table>
<table id="2">
<tr>
<td>
<table id="3">
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</td>
</tr>
</table>
</root>
You can get the items in the innermost table with:
//table[#id="3"]
You can get an individual <td> item from that innermost table with:
//table/tr/td/table/tr[2]/td[1]
Assigning an id attribute makes it a little easier (note missing /tr/td items after the first table):
//table[#id="3"]/tr[2]/td[1]
I have a list of 'product' which I want to show as a list of row table using an html template.
The html template looks like:
<tr th:fragment="productTemplate">
<td th:text="${productName}">product name</td>
<td th:text="${productprice}>product price</td>
</tr>
Here is what I did:
<table>
<tr th:each="product : ${products}" th:substituteby="product :: productTemplate" th:with="productName=*{name}, productPrice=*{price}" />
</table>
If I use th:include, there will be tr nested to each tr
If I use th:substituteby, substitute has the priority on th:each
I cant find a way to replace my loop items by an other.
Somebody have a solution to do this?
I got it:
<table>
<tr th:each="product : ${products}" th:include="product :: productTemplate"
th:with="productName=${product.name}, productPrice=${product.price}"
th:remove="tag" />
</table>
And here, we can keep the template class on the tr element (that what I wanted)
<tbody th:fragment="productTemplate">
<tr class="my-class">
<td th:text="${productName}">product name</td>
<td th:text="${productPrice}">product price</td>
</tr>
</tbody>
here's the result:
<table>
<tr class="my-class">
<td>Lettuce</td>
<td>12.0</td>
</tr>
<tr class="my-class">
<td>Apricot</td>
<td>8.0</td>
</tr>
</table>
thanks to danielfernandez from the official thymeleaf forum
th:include is what you are looking for. The code below works for me. I prefer to put multiple fragments in one file so I've included that here.
<table>
<tr th:each="product : ${products}" th:include="/fragments/productFragment :: productRow" />
</table>
...
/fragments/productFragment.html
...
<tr th:fragment="productRow">
<td th:text="${product.productName}">product name</td>
<td th:text="${product.productPrice}">product price</td>
</tr>
...
I have a partial view like this:
#model List<user>
#foreach (var user in Model)
{
<tr>
<td>#user.name</td>
<td>...</td>
</tr>
}
And get an error like this:
Validation (HTML5): Element 'tr' cannot be nested within element 'tr'.
It's annoying me more than it should, but I want to get rid of it. Installing Web Standards Update didn't help. Any ideas?
Edit
This is the main view:
<table>
<thead>
<tr>
<th>#i18n.name</th>
<th>...</th>
</tr>
</thead>
<tbody id="results">
#Html.Partial("list_rows", #Model.users)
</tbody>
</table>
This is the generated HTML:
<table>
<thead>
<tr>
<th>naam</th>
<th>...</th>
</tr>
</thead>
<tbody id="results">
<tr>
<td>...</td>
<td>...</td>
</tr>
<tr>
<td>...</td>
<td>...</td>
</tr>
</tbody>
</table>
Edit Pulling the entire page through the W3C validator gives
This document was successfully checked as HTML5!
This error appears when you open a <tr> element before you loop through your model. So far the code you postet is correct and free of errors.
Just make sure that your code looks something like this:
<table>
#foreach (var user in Model)
{
<tr>
<td>#user.name</td>
<td>...</td>
</tr>
}
</table>
It seems like you already have an open tr tag in which you are trying to add more tr tags. If you already have tr tags in your table, just make sure they are all closed before the loop starts:
<tr>..</tr>