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..
Related
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 am working with jsf 2.1 and primefaces 3.5
I am using "f:convertNumber" and "f:convertDateTime" to format the numbers and date, it is working in normal screen but, it is not working in dialog box(Once add button pressed, i am displaying the dialog box).
Here is my code:
<p:dialog id="receiptdialogprint" modal="true" widgetVar="printDlgId" header="Success" draggable="true" closable="false" resizable="false" maximizable="false" minimizable="false" style="font-family:Arial; font-size:11px;" appendToBody="true" width="50%">
<h:form id="receiptdialog_form">
<p:panelGrid id="payment_receipt_Panel" style="width:80%">
<p:row>
<p:column style="text-align:left;width:45%">
<p:outputLabel value="Date " style="font-size:16px" />
</p:column>
<p:column style="text-align:left;width:45%">
<h:outputText id="payment_date" value=": #{paymentreceipt.paymentdate}">
<!-- <f:convertDateTime for="payment_date" type="date"/> -->
<f:convertDateTime dateStyle="medium"/>
<f:convertDateTime type="date" pattern="dd-MM-yyyy" />
</h:outputText>
</p:column>
</p:row>
<p:row>
<p:column style="text-align:left;width:45%">
<p:outputLabel value="Annual Memebership Fee(In Rs) " style="font-size:16px" />
</p:column>
<p:column style="text-align:left;width:45%">
<h:outputText value=": #{paymentreceipt.paymentannualmemberfee_without_servicetax}" >
<f:convertNumber maxFractionDigits="2"/>
</h:outputText>
</p:column>
</p:row>
</<p:panelGrid>
</<h:form>
</p:dialog>
Output it showing like this:
Date : Fri Aug 01 14:21:53 IST 2014
Annual Memebership Fee(In Rs) : 3782.48487006052
For Others(In Rs) : 889.99644001424
Expected Out put:
Date :Friday, 1 August, 2014
Annual Memebership Fee(Without ST) :3,782.48
For Others(Without ST) :890
Try this,
<p:row>
<p:column style="text-align:left;width:45%">
<p:outputLabel value="Date :" style="font-size:16px" />
</p:column>
<p:column style="text-align:left;width:45%">
<h:outputText id="payment_date" value="#{paymentreceipt.paymentdate}">
<f:convertDateTime dateStyle="full" type="date"/>
</h:outputText>
</p:column>
</p:row>
<p:row>
<p:column style="text-align:left;width:45%">
<p:outputLabel value="Annual Memebership Fee(In Rs) :" style="font-size:16px" />
</p:column>
<p:column style="text-align:left;width:45%">
<h:outputText value="#{paymentreceipt.paymentannualmemberfee_without_servicetax}" >
<f:convertNumber maxFractionDigits="2" pattern="##,##0.00"/>
</h:outputText>
</p:column>
</p:row>
I am using richfaces if we use any special characters like space or : with the date and number format. It will not convert. So replace the colon and try. If you want the colon use seperate h:outputLabel for that.
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?
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>