Primefaces datatable, item on multiple rows - jsf-2

I can not find a primefaces datatable example on how to make one item to be shown on two (or more) rows.
I need to show an item in a datatable about like this:
<table>
<tr>
<td>Text 1 from entry</td>
<td>Text 2 from entry</td>
</tr>
<tr>
<td colspan="2">Text 3 from entry</td>
</tr>
</table>
Can it be done or should I use some other tag to render like this?
I tried:
...xmlns:p="http://primefaces.org/ui"...
<p:dataTable var="item" value="#{bean.items}">
<p:column>
<p:row>
<p:column>
<h:outputText value="#{item.title}" />
</p:column>
<p:column>
<h:outputText value="#{item.shortText}" />
</p:column>
</p:row>
<p:row>
<p:column colspan="2">
<h:outputText value="#{item.longText}" />
</p:column>
</p:row>
</p:column>
</p:dataTable>
But obviously this is wrong and/or I have misunderstood the concept of using 'p:row'. I can not find any explanation on how to do this properly, so any advice would be appreciated.

Why don't you want to use the <p:panelGrid> component that can achieve this functionality easily?
Basic example:
<p:panelGrid>
<p:row>
<p:column>Text 1 from entry</p:column>
<p:column>Text 2 from entry</p:column>
</p:row>
<p:row>
<p:column colspan="2">Text 3 from entry</p:column>
</p:row>
</p:panelGrid>
That embedded, we have:
<p:dataTable var="item" value="#{bean.items}">
<p:column>
<p:panelGrid>
<p:row>
<p:column><h:outputText value="#{item.title}" /></p:column>
<p:column><h:outputText value="#{item.shortText}" /></p:column>
</p:row>
<p:row>
<p:column colspan="2"><h:outputText value="#{item.longText}" /></p:column>
</p:row>
</p:panelGrid>
</p:column>
</p:dataTable>

Related

datatable emptymessage does not automatically colspan to total no. of columns when datatable has no rows

I am using Primefaces 5.2 over Weblogic 11g/Java 1.6/Jsf 2.1.
I have a datatable whose certain rows are conditionally NOT rendered.
My problem is that when the datatable has NO rows to display, the emptyMessage is spanned to only the first column and not to all the columns. Below is my datatable sample.
<p:dataTable var="sale" >
<f:facet name="header">
Sales/Profits of Manufacturers
</f:facet>
<p:columnGroup type="header">
<p:row>
<p:column rowspan="3" headerText="Manufacturer" />
<p:column colspan="4" headerText="Sale Rate" />
</p:row>
<p:row>
<p:column colspan="2" headerText="Sales" />
<p:column colspan="2" headerText="Profit" />
</p:row>
<p:row>
<p:column headerText="Last Year" />
<p:column headerText="This Year" />
<p:column headerText="Last Year" />
<p:column headerText="This Year" />
</p:row>
</p:columnGroup>
<p:column rendered="false">
<h:outputText value="s" />
</p:column>
<p:column rendered="false">
<h:outputText value="s" />
</p:column>
<p:column rendered="false">
<h:outputText value="s" />
</p:column>
<p:column rendered="false">
<h:outputText value="s">
</h:outputText>
</p:column>
<p:column rendered="false">
<h:outputText value="s">
</h:outputText>
</p:column>
</p:dataTable>
Seems to be a known issue.
It is fixed in 5.2.6 and 5.1.20. For most of the people it should be available in 5.3 version.

Having problems with Events with PrimeFaces 5

I am using PrimeFaces 5. Trying to learn it.
I am working on this particular screen for almost 3 days and had no progress.
I read the showcase of Primefaces lots of times, but everything seems to be in order. It is possible that I am addicted to my code and can not see the answer, but it seems to be all liked because it is all associated with events, or so it seems.
Problems:
- My DropDown (selectOneMenu) does not respond to click events to show its options;
- The arrows that do the paging of my search results does not respond to click as well;
- The search button does not respond after the first search;
- The View buttons does not displays the dialog;
- The growl component is also not recieving updates;
I am supplying the link to download the sourcecode here
- https://dl.dropboxusercontent.com/u/5784798/par.7z
Here it is the form working
<h:form id="formularioResultadoUsuario">
<p:dataTable var="usuario"
value="#{adiminstraUsuarioView.lazyUsuarioDataModel}"
paginator="true" rows="10"
paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"
rowsPerPageTemplate="5,10,15" rowKey="#{usuario.id}"
selectionMode="single"
selection="#{adiminstraUsuarioView.selectedUsuario}"
id="usuarioTable" lazy="true">
<p:ajax event="rowSelect"
listener="#{adiminstraUsuarioView.onRowSelect}"
update=":formularioResultadoUsuario:usuarioDetail"
oncomplete="PF('usuarioDialog').show()" />
<p:column headerText="Id" sortBy="#{usuario.id}"
filterBy="#{usuario.id}">
<h:outputText value="#{usuario.id}" />
</p:column>
<p:column headerText="Nome" sortBy="#{usuario.nome}"
filterBy="#{usuario.nome}">
<h:outputText value="#{usuario.nome}" />
</p:column>
<p:column headerText="Grupo" sortBy="#{usuario.grupo}"
filterBy="#{usuario.grupo}">
<h:outputText value="#{usuario.grupo}" />
</p:column>
<p:column headerText="Role" sortBy="#{usuario.role}"
filterBy="#{usuario.role}">
<h:outputText value="#{usuario.role}" />
</p:column>
<p:column headerText="Sistema" sortBy="#{usuario.sistema}"
filterBy="#{usuario.sistema}">
<h:outputText value="#{usuario.sistema}" />
</p:column>
<p:column headerText="Subsistema" sortBy="#{usuario.subsistema}"
filterBy="#{usuario.subsistema}">
<h:outputText value="#{usuario.subsistema}" />
</p:column>
</p:dataTable>
<p:dialog header="Car Detail" widgetVar="usuarioDialog" modal="true"
showEffect="fade" hideEffect="fade" resizable="false">
<p:outputPanel id="usuarioDetail" style="text-align:center;">
<p:panelGrid columns="2"
rendered="#{not empty adiminstraUsuarioView.selectedUsuario}"
columnClasses="label,value">
<h:outputText value="Id:" />
<h:outputText value="#{adiminstraUsuarioView.selectedUsuario.id}" />
<h:outputText value="Nome" />
<h:outputText
value="#{adiminstraUsuarioView.selectedUsuario.nome}" />
<h:outputText value="Grupo:" />
<h:outputText
value="#{adiminstraUsuarioView.selectedUsuario.grupo}" />
<h:outputText value="Role:" />
<h:outputText
value="#{adiminstraUsuarioView.selectedUsuario.role}" />
<h:outputText value="Sistema:" />
<h:outputText
value="#{adiminstraUsuarioView.selectedUsuario.sistema}" />
<h:outputText value="Subsistema:" />
<h:outputText
value="#{adiminstraUsuarioView.selectedUsuario.subsistema}" />
</p:panelGrid>
</p:outputPanel>
</p:dialog>
</h:form>

primefaces autocomplete works fine outside datatable but not working inside it

I have this autocomplete component below that works outside the datatable but it doesn't work inside it
I don't see the cause :
<p:dataTable id="table" var="car" editable="true" editMode="cell"
widgetVar="carsTable" rowKey="#{car.idarticleFourniseur}"
value="#{articlesMB.listarticlefournisseurs}" rows="3">
<p:ajax event="cellEdit" listener="#{articlesMB.onCellEdit}"
update=":messages" />
<p:column headerText="Id">
<h:outputText value="#{car.idarticleFourniseur}" />
</p:column>
<p:column headerText="Nom">
<h:outputText value="#{car.libelle}" />
</p:column>
<p:column headerText="Fournisseur">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{car.fournisseur.personne.nom}" />
</f:facet>
<f:facet name="input">
<p:autoComplete id="dfdd" var="p" itemLabel="#{p.personne.nom}"
itemValue="#{p}" dropdown="true" process="#this"
value="#{articlesMB.selectedFournisseur}"
forceSelection="true" converter="#{fournisseursConverter}"
completeMethod="#{articlesMB.complete}">
<p:column>
#{p.personne.nom} - #{p.personne.prenom}
</p:column>
</p:autoComplete>
</f:facet>
</p:cellEditor>
</p:column>
</p:dataTable>
<p:autoComplete id="dfd" var="p" itemLabel="#{p.personne.nom}"
itemValue="#{p}" dropdown="true" process="#this"
value="#{articlesMB.selectedFournisseur}" forceSelection="true"
converter="#{fournisseursConverter}"
completeMethod="#{articlesMB.complete}">
<p:column>
#{p.personne.nom} - #{p.personne.prenom}
</p:column>
</p:autoComplete>
the second autocomplete works fine, but the first (in datatable) doesn't work (the completion does not appear)
do you have any idea
thank you in advance
Instead of celleditor you can use inplace
<p:inplace editor="true" label="#{contactRole.userDto.fullContactData}" emptyLabel="#{msgs['constructionSite.text.contact']}">
<p:autoComplete value="#{contactRole.userDto}"
id="contact1" completeMethod="#{assignContactBean.completeContacts}"
var="c" itemLabel="#{c.fullContactData}" itemValue="#{c}"
converter="#{assignContactBean}" forceSelection="true" scrollHeight="200"/>
</p:inplace>

p:datatable(primefaces) line separation missing

line seperation (dynamically ) missing between rows in datatable in primefaces, just look in this image( i can`t able to upload image here)
http://i.stack.imgur.com/tvzZ3.png
<h:form>
<p:dataTable id="messageTable" var="mout" value="#{messageOutController.items}" rows="25" scrollable="true" height="150">
<p:column style="width:150px"><f:facet name="header">ID</f:facet><h:outputText value="#{mout.messageId}"/> </p:column>
<p:column style="width:150px" ><f:facet name="header">Recepient</f:facet> <h:outputText value="#{mout.smsRecipient}"/> </p:column>
<p:column style="width:50px" ><f:facet name="header">Language</f:facet><h:outputText value="#{mout.smsLanguage}"/> </p:column>
<p:column style="width:150px" ><f:facet name="header">Message</f:facet><h:outputText value="#{mout.smsMessage}"/> </p:column>
<p:column style="width:50px" ><f:facet name="header">Status</f:facet><h:outputText value="#{mout.smsStatus}"/> </p:column>
<p:column style="width:100px"><f:facet name="header">Application ID</f:facet> <h:outputText value="#{mout.applicationId}"/> </p:column>
<p:column style="width:150px"><f:facet name="header">Created</f:facet> <h:outputText value="#{mout.creationTime}"><f:convertDateTime pattern="MM/dd/yyyy HH:mm:ss" /></h:outputText> </p:column>
<p:column style="width:100px"> <p:commandLink ajax="false" value="View" action="#{messageOutController.prepareView()}"/> </p:column>
</p:dataTable>

Wrong styling of p:dataTable with f:facet name="header"

I am showing data in a <p:dataTable>, but it shows like this
The view markup is straightforward:
<h:form>
<p:dataTable id="campaignSummaryTable" var="mout" value="#{campaignSummarySearchRes.summaryList}" height="500" scrollable="true" >
<p:column>
<f:facet name="header"><h:outputText value="Campaign Code"/></f:facet>
<h:outputText value="#{mout.shortCode}"/>
</p:column>
<p:column>
<f:facet name="header"><h:outputText value="Message"/></f:facet>
<h:outputText value="#{mout.message}"/>
</p:column>
<p:column>
<f:facet name="header"><h:outputText value="Option 1"/></f:facet>
<h:outputText value="#{mout.option1}"/>
</p:column>
<p:column>
<f:facet name="header"><h:outputText value="Option 2"/></f:facet>
<h:outputText value="#{mout.option2}"/>
</p:column>
<p:column>
<f:facet name="header"><h:outputText value="Option 3"/></f:facet>
<h:outputText value="#{mout.option3}"/>
</p:column>
<p:column>
<f:facet name="header"><h:outputText value="Option 4"/></f:facet>
<h:outputText value="#{mout.option4}"/>
</p:column>
<p:column>
<f:facet name="header"><h:outputText value="Other"/></f:facet>
<h:outputText value="#{mout.other}"/>
</p:column>
</p:dataTable>
</h:form>
How I can solve this issue? The header and the content should have the same column width.
Add a style="width:125px" attribute to your columns so they look like this one:
<p:column headerText="Campaign Code" style="width:125px">
<h:outputText value="#{mout.shortCode}" />
</p:column>
I also put the header as an attribute of column. I dont know if thats neccessary, but it looks better.
See also PF Showcase
What version do you use?
You do not have to put a facet in a column; each column has a headerText attribute. Look at this: http://www.primefaces.org/showcase-labs/ui/datatableComplex.jsf.

Resources