I'm implementing a p:dataTable component, based on the Primefaces Showcase
The code is:
<p:dataTable
id="newDataTable"
editable="true"
editMode="cell"
var="item"
value="#{myBean.listNewDataTable}">
<p:ajax event="cellEdit" listener="#{myBean.newCellEditListener}" update="#this"/>
<p:column width="150" >
<p:cellEditor>
<f:facet name="output">
<h:inputText value="#{item.description}" readonly="true"/>
</f:facet>
<f:facet name="input">
<p:selectOneMenu value="#{item.id}" style="width: 90%;">
<f:selectItems value="#{myBean.productsMap.entrySet()}" var="entry" itemValue="#{entry.key}" itemLabel="#{entry.value}" />
</p:selectOneMenu>
</f:facet>
</p:cellEditor>
</p:column>
-- More Data --
</p:dataTable>
And the backing bean method:
public void newCellEditListener(CellEditEvent event){
... Some work here ...
}
When the value on the editable cell is changed, the p:cellEditor works as expected.
The problem is:
When the value on the editable cell remains unchanged, the p:cellEditor shows the item.id when it should actually be showing the item.description.
Am I missing something obvious? Do I need additional configuration?
I have been googling for a tip or an answer, without success.
UPDATE
Same problem persists on the following code:
<p:column headerText="Money" width="150" >
<p:cellEditor >
<f:facet name="output">
<h:inputText value="#{actual.money}" readonly="true">
<f:convertNumber type="currency" />
</h:inputText>
</f:facet>
<f:facet name="input">
<h:inputText value="#{actual.money}">
</h:inputText>
</f:facet>
</p:cellEditor>
</p:column>
The value on the backing bean its the same for input and output, the difference between each other should be the 'currency' format.
UPDATE
As a workaround I used "p:commandButton" to update the Datatable.
<p:commandButton icon="ui-icon-refresh" update="newDataTable" value="Update" />
The app is running on:
Primefaces 3.5
Primefaces Extensions 0.7.1
Mojarra 2.1.22
Tomcat 7
Thanks for your help.
Kind regards.
Values in output and input should be the same. Try to fix that.
Found the issue reported and fixed on the Primefaces issue site: http://code.google.com/p/primefaces/issues/detail?id=6116
I downloaded the 4.0.RC1 and I do see the issue as being resolved as reported but there are some major differences in 4.0 versus 3.5 so I'm going to be waiting for 3.5.15 to be released.
Related
I basically have two input field I display if the value is currently empty or null. if it is not, I display an outputText. Those two values are currency values stored in a Long object and I use a converter to display the data properly (I can't use PrimeFaces' inputNumber since I am using PrimeFaces 5.3). My problem is the following :
<c:set var="edtVal1" value="#{bean.val1 ne null and bean.val1 ne 0}" scope="request" />
<c:set var="edtVal2" value="#{bean.val2 ne null and bean.val2 ne 0}" scope="request" />
<p:panelGrid>
<p:row>
<p:column colspan="2">
<p:messages id="mainMessages" globalOnly="false" autoUpdate="true" showDetail="true" />
</p:column>
</p:row>
<!-- [...] -->
<p:row>
<p:column styleClass="col-quarter col-label2">
<h:outputText value="value 1" />
</p:column>
<p:column styleClass="col-quarter col-value2" rendered="#{edtVal1}">
<h:outputText id="val1Output" value="#{bean.val1}" converter="myConverter" />
</p:column>
<p:column styleClass="col-quarter" rendered="#{not edtVal1}">
<p:inputText id="val1Input" value="#{bean.val1}" converter="myConverter">
<p:ajax update="mainMessages val1Input" event="change" />
</p:inputText>
</p:column>
</p:row>
<p:row>
<p:column styleClass="col-quarter col-label2">
<h:outputText value="value 2" />
</p:column>
<p:column styleClass="col-quarter col-value2" rendered="#{edtVal2}">
<h:outputText id="val1Output" value="#{bean.val2}" converter="myConverter" />
</p:column>
<p:column styleClass="col-quarter" rendered="#{not edtVal2}">
<p:inputText id="val1Input" value="#{bean.val2}" converter="myConverter">
<p:ajax update="mainMessages val1Input" event="change" />
</p:inputText>
</p:column>
</p:row>
</p:panelGrid>
when I put it like this, the messages thrown by the converter are displayed, but none of the fields are updated. However, if I use the same boolean variable for both input/output options (changed the variable used in rendered attribute of the 1rst data row to use edtVal2 in both) like so :
<p:row>
<p:column styleClass="col-quarter col-label2">
<h:outputText value="value 1" />
</p:column>
<p:column styleClass="col-quarter col-value2" rendered="#{edtVal1}">
<h:outputText id="val1Output" value="#{bean.val1}" converter="myConverter" />
</p:column>
<p:column styleClass="col-quarter" rendered="#{not edtVal1}">
<p:inputText id="val1Input" value="#{bean.val1}" converter="myConverter">
<p:ajax update="mainMessages val1Input" event="change" />
</p:inputText>
</p:column>
</p:row>
The first field updates successfully and the second once still does not work.
Using a converter to display a formated data is a workaround I already done and it works just as expected and I use the same converter than before. But this time, I don't understand why it's not working.
The converter is important to reproduce the issue, but any custom converter seems to do the job.
Any other solutions are still welcome on this post, but I managed to find a working solution :
when I changed the rendered attribute to a constant string, the issue was absent. So I think the problem comes from a misunderstanding of <c:set>.
My solution was to use a the bean as a controller. I changed the variables from the xhtml file to properties in the controller and now everything works fine. So I removed all <c:set> from my xhtml and use a proper MVC pattern on that page now.
Note :
For those who don't know what MVC is : it's a neat architectural pattern that divides clearly the user interface and manipulated data. Learn more on wikipedia.
can someone explain why following minimal example won't evaluate the required element? Or is it the "wrong" way and there is a better one I don't know.
I'm aware that my question is similiar to this question: Primefaces cellEditor required inputText. For me it seems that the solution is more of a workaround than a valid way to cope with this problem. So yeah any ideas how to deal with this?
Code:
<p:dataTable id="ruleTableID" var="rule" value="#{rC.rules}" widgetVar="rowsTable"
rows="20" editable="#{rC.editable}"
editMode="cell" paginator="true"
paginatorPosition="bottom" paginatorTemplate="{Save}"
emptyMessage="#{t['rule.empty']}">
<p:ajax event="cellEdit" update=":newRules:messages, :newRules:" />
<p:column headerText="#{t['policy.registerNumber']}">
<p:cellEditor>
<f:facet name="input">
<p:inputText styleClass="ruleInputText" value="#{rule.registerNr}" required="true" maxlength="4">
<f:validateLength minimum="4" />
<f:validateRegex pattern="([A-Z\d]{4})" />
<p:clientValidator/>
</p:inputText>
</f:facet>
<f:facet name="output">
<h:outputText value="#{rule.registerNr}" />
</f:facet>
</p:cellEditor>
</p:column>
<f:facet name="{Save}">
<p:commandButton id="saveButton" value="#{t['button.save']}" action="#{rC.saveRules}" update=":newRules" rendered="#{rC.isAllValueSet}" />
</f:facet>
</p:dataTable>
If you are using client side validation you have to add the attributes ajax="false" and validateClient="true" to your commandButton
You can see a example here:
http://www.primefaces.org/showcase/ui/csv/event.xhtml
I have a datatable which contains items to be quoted on, and so has columns for quantity, unit price, etc and for which I want to display the total price for the item when the unit price is entered. My code looks like this:
<p:column styleClass="tdasheader" style="text-align:center" width="80" headerText="Unit Price">
<pe:inputNumber id="unitPrice" value="#{quotedItem.quotedPrice}"
minValue="0.01" maxValue="999999999.99" decimalPlaces="2"
style="text-align: right;" size="10">
<p:ajax event="change"
listener="#{supplierQuotationBean.onAmountChange}"
process="#this" update="totalPrice" />
<f:attribute name="quotedItem" value="#{quotedItem}" />
</pe:inputNumber>
</p:column>
<p:column styleClass="tdasheader" style="text-align:center" width="60" headerText="Disc" footerText="Total (inc Dly)">
<pe:inputNumber id="discount" value="#{quotedItem.quotedDiscount}"
minValue="1" maxValue="100" />
</p:column>
<p:column styleClass="tdasheader" width="80" id="totalPriceCol">
<f:facet name="header" style="text-align:center">
<h:outputText value="Total" />
</f:facet>
<p:outputPanel id="totalPrice" style="text-align:right; padding-right:10px">
<h:outputText value="#{quotedItem.totalPrice}">
<f:convertNumber pattern="#,##0.00"/>
</h:outputText>
</p:outputPanel>
<f:facet name="footer">
<p:outputPanel style="text-align:right; padding-right:10px">
<h:outputText value="x#{supplierQuotationBean.quotationTotalAsString}x" />
</p:outputPanel>
</f:facet>
</p:column>
As you may have guessed as I'm posting for help, the ajax update doesn't work - well, actually it works for the first row only. I've tried changing the value in the update parameter to "#{p:component('totalPrice')}" which does the same thing. I've even tried using the listener to do the update as follows:
String clientId = event.getComponent().getClientId();
String totalPriceClientId = clientId.substring(0, clientId.lastIndexOf(":"))+":totalPrice";
RequestContext requestContext = RequestContext.getCurrentInstance();
requestContext.update(totalPriceClientId);
... but this doesn't work either. More significantly I guess, even if I update the whole datatable I still get the same result, but additionally lose the value in the unit price field (even with a process="#this")!
Can anyone please suggest how I might be able to overcome this problem?
I'm using PrimeFaces 5.1.15 and MyFaces 2.2.6.
Many thanks,
Neil
I have an with an add button, this button add a row to the datatable like this.
public void addDetail(){
detail.add(new Detail());
RequestContext.getCurrentInstance().update(":theDatatable");
}
the problem is when the datatable have too many rows (Ex 200 rows) because the ajax call in the render process have many params, the server throw this error
java.lang.IllegalStateException: More than the maximum number of request parameters (GET plus POST) for a single request ([512]) were detected. Any parameters beyond this limit have been ignored. To change this limit, set the maxParameterCount attribute on the Connector.
I cant fix this changed the maxParameterCount but the time of the request not change (~2000ms)
My question is: Is posible add an single row via javascript using the widgetVar o something?? Any other solution?
Thanks!!
Edit:
This is part of the xhtml code.
<p:dataTable id="theDatatable" var="_det" rowIndexVar="indexVar"
style="width:100%;" widgetVar="dataTableDetalleWidget"
rendered="#{neLiquidacionController.currentCab.tipoLine==neLiquidacionController.facturar.value}"
editMode="row" editable="true"
value="#{neLiquidacionController.detail}">
<p:ajax event="rowEdit" update="#this" />
<p:column headerText="Item" width="40" style="background:#EEEEEE;">
<h:outputText value="#{indexVar+1}" />
</p:column>
<p:column headerText="DescripciĆ³n">
<p:cellEditor>
<f:facet name="output">
<p:outputLabel value="#{_det.productos.descripcion}" />
</f:facet>
<f:facet name="input">
<p:autoComplete id="producto" placeholder="ingrese un valor.."
disabled="#{neLiquidacionController.currentCab.estado!='PENDIENTE'}"
converter="#{productoConverter}" autocomplete="true"
required="true" onfocus="this.select();"
onkeypress="if(event.keyCode==27){addDetail();}"
completeMethod="#{neLiquidacionController.completeProducto}"
var="p" itemLabel="#{p.descripcion}" itemValue="#{p}"
scrollHeight="300" forceSelection="true" dropdown="true"
value="#{_det.productos}">
<p:ajax event="itemSelect" async="true"
listener="#{neLiquidacionController.elementChangeProducto}"></p:ajax>
<f:facet name="itemtip">
<p:panelGrid columns="2">
<f:facet name="header">Producto</f:facet>
<p:column headerText="Codigo">
<h:outputLabel value="#{p.codProducto}" />
</p:column>
<p:column headerText="Descripcion">
<h:outputLabel value="#{p.descripcion}" />
</p:column>
</p:panelGrid>
</f:facet>
</p:autoComplete>
</f:facet>
</p:cellEditor>
</p:column>
</p:dataTable>
<pe:remoteCommand name="addDetail" async="true" partialSubmit="true"
process="#this"
actionListener="#{neLiquidacionController.addDetail()}">
</pe:remoteCommand>
With Primefaces 5.0 and PrimeFaces extension 2.0
Firebug request and response.
javax.faces.ViewState 3374159165244990485:-1029187269574844262
javax.faces.behavior.even... keypress
javax.faces.partial.ajax true
javax.faces.partial.event keypress
javax.faces.partial.execu... notaEnvioDet:detalle:98:salida
javax.faces.source notaEnvioDet:detalle:98:salida
notaEnvioDet:detalle:0:co... 7840048000043
notaEnvioDet:detalle:0:pr... 4
......
notaEnvioDet:detalle:98:pr... 680
notaEnvioDet:detalle:98:pr... AZUCAR CONFITERO X 1Kg.
notaEnvioDet:detalle:98:sa... 37.0
notaEnvioDet:nroDocumento 824
this send all the datatable value...
And the response here:
<?xml version='1.0' encoding='UTF-8'?>
<partial-response><changes><update id="messages"><![CDATA[<span id="messages"></span><script id="messages_s" type="text/javascript">$(function(){PrimeFaces.cw('Growl','growlWidget',{id:'messages',sticky:false,life:6000,escape:true,msgs:[]});});</script>]]></update><update id="usuarios:j_idt482"><![CDATA[<div id="usuarios:j_idt482" class="ui-messages ui-widget" aria-live="polite"></div>]]></update><update id="javax.faces.ViewState"><![CDATA[3374159165244990485:-1029187269574844262]]></update></changes></partial-response>
If you Using Server as a Jboss you can change in standalone.xml is like
<system-properties>
<property name="org.apache.tomcat.util.http.Parameters.MAX_COUNT" value="2000"/>
</system-properties>
I've simply changed working JSF h:dataTable to p:dataTable, but it's empty. Without headers, one empty row. I've installed primefaces-3.0.M1.jar to my project.
UPDATE: if I remove binding, dataTable is working properly, but without advantages of HtmlDataTable...
UPDATE2: don't anybody knows how to bind rich:dataTable?
Part of code:
<p:dataTable
id="tableDetail"
value="#{myBdeCheck.dataListBde}"
binding="#{myBdeCheck.dataTable}"
var="bdeItem">
<p:column>
<f:facet name="header">
<h:outputText value="Select" />
</f:facet>
<h:selectBooleanCheckbox value="#{myBdeCheck.selectedRow}"/>
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Shift" />
</f:facet>
<h:outputText value="#{bdeItem.dayShift}"/>
</p:column>
<f:facet name="footer">
<h:commandButton id="btnAdd" action="#{myBdeCheck.add}"/>
</f:facet>
</p:dataTable>
Did I forgot something?
This can be caused by binding (as you suggested yourself). You have to bind p:dataTable to
org.primefaces.component.datatable.DataTable
instead of javax.faces.component.html.HtmlDataTable