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>
Related
<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 been working on this problem from last two days. I went through the apis possibly I could refer to but no luck.
I have been using ui:repeat as jsf facelet to render data with rows and columns
Code for reference
<ui:repeat var="pendingRequestItem" value="#{oqHomeController.allRequests}" > --JSF
<p:row rendered="#{oqHomeController.renderPendingRequest}> -- PRIMEFACES FOR ROW
<td><h:outputText value="#{pendingRequestItem.title}" /></td>
<td><h:outputText value="#{oqHomeController.pendingCount}" /></td>
</p:row>
</ui:repeat>
And the above code is resulting in the following which is very strange.
<tbody>
<td>Request for Quote 1</td>
<td>1</td>
<td>DTHEME1</td>
<td>4</td>
</tbody>
I hope it should be
<tbody>
<tr>
<td>Request for Quote 1</td>
<td>1</td>
</tr>
<tr>
<td>DTHEME1</td>
<td>4</td>
</tr>
</tbody>
Please help thanks.
Have you tried <p:dataTable> it seems that is what you are looking for:
<p:dataTable var="pendingRequestItem" value="#{oqHomeController.allRequests}">
<p:column>
<h:outputText value="#{pendingRequestItem.title}"/>
</p:column>
<p:column>
<h:outputText value="#{oqHomeController.pendingCount}"/>
</p:column>
</p:dataTable>
my page contains a data list within another data list. The outer data list simulates an accordion panel, while the inner data list renders my dynamic columns.
Everything works fine, but Internet Explorer 8 behaves differently in respect of Firefox and Chrome, because in the resulting html it renders some empty objects that leaves a blank space before data.
The screenshots show the differences between Explorer 8 and Firefox.
Firefox generated HTML:
Explorer 8 generated HTML:
Firefox rendering:
Explorer 8 rendering:
Here is the code:
<p:dataList id="data" styleClass="myDataList" value="#{bean.getAnag(idSito)}" var="tipologia" itemType="disc" type="definition">
<div class="ui-accordion ui-widget ui-helper-reset ui-hidden-container tabAccordion" style="width: 100%;">
<table id="accordionFake#{idSito}" border="1" class="table-din-col" style="display: none; margin-bottom: 10px;">
<!-- HEADERS -->
<tr class="table-din-col-titolo">
<td style="padding: 4px;">
<h:outputText value="Codice" />
</td>
<td style="padding: 4px;">
<h:outputText value="Descrizione" />
</td>
<td style="padding: 4px;">
<h:outputText value="CodiceAgg" />
</td>
<td style="padding: 4px;">
<h:outputText value="Pos" />
</td>
<p:dataList value="#{bean.buildColumns(idSito)}" var="colDin" type="definition">
<td>
<h:outputText value="#{colDin.header}" />
</td>
</p:dataList>
</tr>
<!-- HEADERS -->
<!-- ROWS BUILDING -->
<p:dataList id="dataL" var="rilevazione" selectionMode="single"
value="#{bean.getLsLoc(idSito)}" type="definition">
<tr class="table-din-col-righe">
<td class="table-din-col-colonne">
<h:outputText id="codice" value="#{rilevazione.codice}" />
</td>
<td class="table-din-col-colonne">
<h:outputText id="desc" value="#{rilevazione.descrizione}" />
</td>
<td class="table-din-col-colonne">
<h:outputText id="codSnam" value="#{rilevazione.codiceAgg}" />
</td>
<td class="table-din-col-colonne">
<h:outputText id="pos" value="#{rilevazione.pos}" />
</td>
<p:dataList value="#{bean.buildColumns(idSito)}" var="colDin" type="definition">
<td class="table-din-col-colonne">
<h:outputText value="#{colDin.property.valore}" />
</td>
</p:dataList>
</tr>
</p:dataList>
<!-- ROWS BUILDING -->
</table>
</div
</p:dataList>
How can I instruct ie8 to correctly render the data lists?
Thanks in advance.
It look like you was using the wrong component for the purpose, or are at least not understanding/familiar with basic HTML.
The <p:dataList> gives you the option to generate a HTML <ul><li> (unordered list), <ol><li> (ordered list) or <dl><dt><dd> (definition list).
However, you seem to be after generating a plain vanilla HTML <table><tr><td> with all cells hardcoded. You have nested a <p:dataList type="definition"> inside <tr> which would only generate <dl><dt><dd> elements inplace where <td> elements are expected. This only ends up in illegal HTML syntax. IE is rather sensitive to that.
You should replace the nested <p:dataList type="definition"> components by <ui:repeat>. It doesn't generate any HTML and your HTML will end up syntactically valid (although I wonder how it makes sense to have a <dl><dt><dd><table>, after all, I suggest to learn basic HTML as well, so that you can better understand which JSF components to pick for the purpose).
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>
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.