I have a Java object with 30 attributes. I populate the object from database. I want to display only values which are not empty.
<table>
<col width="280"/><col width="130"/>
<ui:repeat var="ud" value="#{TreeViewController.componentData}">
<tr>
<td>
<h:outputText value="componentStatsId" rendered="#{ud.componentStatsId != 0}"/>
</td>
<td>
<h:outputText value="#{ud.componentStatsId}" rendered="#{ud.componentStatsId != 0}"/>
</td>
</tr>
.......... and 40 more table rows
</ui:repeat>
</table>
I tested to create simple JSF table with rows which are not rendered if the values are empty. But I noticed that if the values are empty I get tiny spaces:
How I can solve this problem?
Yes, that would be the expected behavior from your code since is just preventing the rendering of the <<h:outputText> but not the <tr> nor <td> components.
To solve this, you should use <ui:fragment> and control the <tr> and <td> renderization using the rendered attribute:
<ui:repeat var="ud" value="#{TreeViewController.componentData}">
<ui:fragment rendered="#{ud.componentStatsId != 0}">
<tr>
<td>
componentStatsId
</td>
<td>
#{ud.componentStatsId}
</td>
</tr>
</ui:fragment>
<!-- .......... and 40 more table rows -->
<ui:fragment rendered="#{ud.componentTypeId != 0}">
<tr>
<td>
...
</td>
<td>
...
</td>
</tr>
</ui:fragment>
</ui:repeat>
Related
I have a condition where i need to have two radio buttond with related data in the below the buttons.
i did something like below but the selected radio button value is not getting in the backed been. Please correct where i am going wrong
<table>
<tr>
<td>
<h:selectOneRadio value="#{beenObject.adressSelection}">
<f:selectItem itemValue="Employer" itemLabel="Employer" />
</h:selectOneRadio>.
</td>
<td>
<h:selectOneRadio value="#{beenObject.adressSelection}">
<f:selectItem itemValue="Consultant" itemLabel="Consultant" />
</h:selectOneRadio>.
</td>
</tr>
<tr>
<td>
<h:outputText value="#{beenObject.consultentDetailsString}">
</h:outputText>
</td>
</tr>
<tr>
<td>
<h:outputText value="#{beenObject.employerDetailsString}">
</h:outputText>
</td>
</tr>
</table>
I'm facing an issue similar as yours however I tried to replicate my situation at your code. While I was simplifying the lines I just end-up fixing your bug.
Below the code wich will work for you.
<table>
<tr>
<td>
<h:selectOneRadio value="#{beenObject.adressSelection}">
<f:selectItem itemValue="Employer" itemLabel="Employer" />
<f:selectItem itemValue="Consultant" itemLabel="Consultant" />
</h:selectOneRadio>
</td>
</tr>
<tr>
<td>
<h:outputText value="#{beenObject.consultentDetailsString}">
</h:outputText>
<h:outputText value="#{beenObject.employerDetailsString}">
</h:outputText>
</td>
</tr>
</table>
Explaining what I did:
I grouped the elements f:selectItem underneath f:selectItems like is shown in the sample at primeface showcase and it starts to work.
Hope it work as you want.
Cheers.
When I try to put in plain HTML table in a PrimeFaces <p:dataTable> the output of the resulting table becomes weird and overlapped.
The code I tried is:
<table border="0" cellpadding="0" cellspacing="0" width="509" style="border-collapse: collapse;width:382pt">
<tbody>
<tr height="19" style="height:14.4pt">
<p:dataTable>
<p:column>
<table>
<tr><td>abc</td></tr>
</table>
</p:column>
</p:datatable>
</tr>
</tbody>
</table>
<a4j:form id="customerForm1" binding="#{customerForm.form}"
ajaxSubmit="false">
<h:inputHidden id="id" value="#{customerForm.customer.id}" />
<rich:panel id="purchaseOrderList"
styleClass="dataTablePanelStyle">
<a4j:outputPanel id="table">
<table border="1" width="100%">
<thead>
<tr align="center">
<th width="8%"><h:outputText id="headerq"
value="#{msg.distance}" styleClass="boldOutputTextStyle" /></th>
<th width="2%"><h:outputText id="ds8" value="" /></th>
</tr>
</thead>
<tbody>
<a4j:repeat
value="#{customerForm.customer.distanceTravelledList}"
var="purchaseOrderDetails" rowClasses="row1, row2">
<tr class="#{(rowIndex mod 2 eq 0)? 'row1' : 'row2'}">
<td align="center" width="10%">
<h:inputText id="distance" size="5" required="true"
value="#{purchaseOrderDetails.distance}"
styleClass="inputTextStyle">
</h:inputText>
</td>
<td><a4j:commandButton value="+"
action="#{customerForm.addDistanceTravelled}"
reRender="purchaseOrderList">
</a4j:commandButton></td>
</tr>
</a4j:repeat>
</tbody>
</table>
</a4j:outputPanel>
</rich:panel>
</a4j:form>
I have created a table where I have used a4j:repeat tag, so that the user can dynamically add the rows depending on his requirement..But when I remove this tag ie a4j:repeat frontend displays only one row ie both column name and input text field.. But when I add a4j:repeat` only the colum names are displayed ie Distance...Can any one tel Me what have I missed ??
Try this, I am using such a table for my process. It works fine for me it may help for you.
<table border="1" width="100%">
<thead>
<tr align="center">
<th width="8%"><h:outputText id="headerq"
value="#{msg.distance}" styleClass="boldOutputTextStyle" /></th>
<th width="2%"><h:outputText id="ds8" value="" /></th>
</tr>
</thead>
<tbody>
<a4j:repeat
value="#{customerForm.customer.distanceTravelledList}"
var="purchaseOrderDetails" rowKeyVar="rowIndex">
<tr>
<td align="center" width="10%">
<h:inputText id="distance" required="true"
value="#{purchaseOrderDetails.distance}"
styleClass="inputTextStyle">
</h:inputText>
</td>
<td><a4j:commandButton value="+"
action="#{customerForm.addDistanceTravelled}"
reRender="purchaseOrderList">
</a4j:commandButton></td>
</tr>
</a4j:repeat>
</tbody>
I have this simple JSF table which is use to display data from Database and also to edit data.
<table>
<ui:repeat var="ud" value="#{DCProfileTabGeneralController.dcData}">
<tr>
<td>Datacenter Type</td>
<td>
<h:outputText value="#{ud.type}"
rendered="#{not DCProfileTabGeneralController.editable}" />
<h:inputText value="#{ud.type}" rendered="#{DCProfileTabGeneralController.editable}" />
</td>
</tr>
<tr>
<td>Date Added</td>
<td>
<h:outputText value="#{ud.dateAdded}"
rendered="#{not DCProfileTabGeneralController.editable}" />
<h:inputText styleClass="datepicker" value="#{ud.dateAdded}" rendered="#{DCProfileTabGeneralController.editable}" />
</td>
</tr>
<tr>
<td>Hour Added</td>
<td>
<h:outputText value="#{ud.hourAdded}"
rendered="#{not DCProfileTabGeneralController.editable}" />
<h:inputText value="#{ud.hourAdded}" rendered="#{DCProfileTabGeneralController.editable}" />
</td>
</tr>
<tr>
<td>Date Deployed</td>
<td>
<h:outputText value="#{ud.dateDeployed}"
rendered="#{not DCProfileTabGeneralController.editable}" />
<h:inputText styleClass="datepicker" value="#{ud.dateDeployed}" rendered="#{DCProfileTabGeneralController.editable}" />
</td>
</tr>
<tr>
<td>Hour Deployed</td>
<td>
<h:outputText value="#{ud.hourDeployed}"
rendered="#{not DCProfileTabGeneralController.editable}" />
<h:inputText value="#{ud.hourDeployed}" rendered="#{DCProfileTabGeneralController.editable}" />
</td>
</tr>
</ui:repeat>
</table>
Now I want to extend the table in this way. When the Boolean flag is true I want to display the text in 12px. When the Boolean flag is false I want to display the text in 20 px. Is this possible in JSF?
You can simply use an EL expression to set the appropriate CSS style:
<table id="idTable"
style="font-size: #{DCProfileTabGeneralController.editable ? '12px' : '20px' }">
I want to create a table which display a list of values in several rows, each row should contains only 3 columns.
I can create this by using JSTL but not using JSF. I am suspecting that it is xhtml related issue, not a problem in JSP, xhtml is very strict about the elements formation. Is there a way to achieve this?
Using JSTL:
<c:forEach var="book" value="${bookBean.bookList}" varStatus="bookStatus">
<c:if test="${bookStatus.index eq 0 or bookStatus.index mod 3 eq 0}">
<tr>
</c:if>
<td>
<table>
<tr>
<td>#{book.bookId}</td>
<td>#{book.bookName}</td>
<td>#{book.price}</td>
<td>#{book.author}</td>
</tr>
</table>
</td>
<c:if test="${bookStatus.count mod 3 eq 0}">
</tr>
</c:if>
</c:forEach>
Using JSF:
<ui:repeat var="book" value="#{bookBean.bookList}" varStatus="bookStatus">
<ui:fragment rendered="#{bookStatus.first or bookStatus.index mod 3 eq 0}">
<tr> <!-- Here i am getting an error saying closing tr missed.--->
</ui:fragment>
<td>
<table>
<tr>
<td>#{book.bookId}</td>
<td>#{book.bookName}</td>
<td>#{book.price}</td>
<td>#{book.author}</td>
</tr>
</table>
</td>
<ui:fragment rendered="#{(bookStatus.index+1) mod 3 eq 0}">
</tr>
</ui:fragment>
</ui:repeat>
This is actually not easy to do without using some component library (richfaces I know for a fact that has a component that does this.. rich:dataGrid..)
Here's a solution I found a while back to solve this issue... (I'm not a big fan of component libraries myself... ).. it's not the most elegant solution.. but it does the trick..
<table>
<tr>
<ui:repeat var="book" value="#{bookBean.bookList}" varStatus="bookStatus">
<td>
<table>
<tr>
<td>#{book.bookId}</td>
<td>#{book.bookName}</td>
<td>#{book.price}</td>
<td>#{book.author}</td>
</tr>
</table>
</td>
<h:outputText value="</tr><tr>" escape="false" rendered="#{(bookStatus.index + 1 ) mod 3 eq 0}"/>
</ui:repeat>
</tr>
</table>
As #FMQ has mentioned, try to use a JSF component library. Primefaces could be a good option, checkout the Demo page.