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>
Related
I am using Sentinel 2.1 and Primefaces 5.3, JSF 2.0, on Weblogic 11g.
We have production applications running on the above spec for a very long time now, and have no issues other than the below.
I have a datatable with col span and row span. The table looks fine in Desktop mode, but when seen in Responsive mode, the table looks very odd and a user cannot make sense out of this data table.
Xhtml
<p:dataTable var="esl" value="#{estleaves.eleaves}" reflow="true"
>
<p:columnGroup type="header">
<p:row>
<p:column rowspan="2" headerText="Employee" styleClass="Wid10"/>
<p:column colspan="4" headerText="Jan" />
<p:column colspan="4" headerText="Feb" />
</p:row>
<p:row>
<p:column headerText="w1" styleClass="Fs9" style="padding-left:0;padding-right:0" />
<p:column headerText="w2" styleClass="Fs9" style="padding-left:0;padding-right:0" />
<p:column headerText="w3" styleClass="Fs9" style="padding-left:0;padding-right:0" />
<p:column headerText="w4" styleClass="Fs9" style="padding-left:0;padding-right:0" />
<p:column headerText="w1" styleClass="Fs9" style="padding-left:0;padding-right:0" />
<p:column headerText="w2" styleClass="Fs9" style="padding-left:0;padding-right:0" />
<p:column headerText="w3" styleClass="Fs9" style="padding-left:0;padding-right:0" />
<p:column headerText="w4" styleClass="Fs9" style="padding-left:0;padding-right:0" />
</p:row>
</p:columnGroup>
<p:column>
<h:outputText value="#{esl.empName}" />
</p:column>
<p:column styleClass="Fs14" >
<h:outputText value="#{esl.jan.w1}" />
</p:column>
<p:column styleClass="Fs14" >
<h:outputText value="#{esl.jan.w2}" />
</p:column>
<p:column styleClass="Fs14" >
<h:outputText value="#{esl.jan.w3}"/>
</p:column>
<p:column styleClass="Fs14" >
<h:outputText value="#{esl.jan.w4}"/>
</p:column>
<p:column styleClass="Fs14" >
<h:outputText value="#{esl.feb.w1}" />
</p:column>
<p:column styleClass="Fs14" >
<h:outputText value="#{esl.feb.w2}" />
</p:column>
<p:column styleClass="Fs14" >
<h:outputText value="#{esl.feb.w3}"/>
</p:column>
<p:column styleClass="Fs14" >
<h:outputText value="#{esl.feb.w4}"/>
</p:column>
Screenshot of Datatable on the Desktop Mode
Screenshot of Datatable on Responsive mode of iPhone pixel approx..
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.
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>
I'm using a p:dataTable to display a list of objects and I would like to order them by their Date property in a descending manner here is the code:
<h:form id="receivablesForm">
<p:dataTable id="receivablesTable" value="#{receivableManager.overdueReceivables}" var="receivable" rows="18" emptyMessage="#{msg['warning.noData']}" style="width: 585px;" sortBy="#{receivable.dueDate}" sortOrder="descending">
<p:column sortBy="#{receivable.invoice.number}" styleClass="fixedSizeColumnSmall">
<f:facet name="header">
<h:outputText value="#{msg['label.number']}" />
</f:facet>
<h:outputText value="#{receivable.invoice.number}-#{receivable.number}" />
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="#{msg['label.clientName']}" />
</f:facet>
<h:outputText value="#{receivable.invoice.client.person.name}" />
</p:column>
<p:column styleClass="fixedSizeColumn">
<f:facet name="header">
<h:outputText value="#{msg['label.dueDate']}" />
</f:facet>
<h:outputText value="#{receivable.dueDate}" style="#{receivableManager.isOverdue(receivable) ? 'color: red' : ''}">
<f:convertDateTime pattern="dd/MM/yyyy" />
</h:outputText>
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="#{msg['label.amount']}" />
</f:facet>
<h:outputText value="#{receivable.amount}">
<f:convertNumber type="currency" locale="pt_br" />
</h:outputText>
</p:column>
</p:dataTable>
</h:form>
However the objects are not being ordered at all. Is it possible to order by a Date property in a descending manner using the sortBy and sortOrder properties?
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.