Editor Calendar in Primefaces 3.5 cell value is lost? - jsf

is that I have a grid that dynamically genre, I mean I add empty rows to the grid, first thought to use primefaces in Cell Editor, so that the value is stored in the list of beans
List, works but the problem that I have is on the calendar, when I select one and is stored, it is stored in the list, I checked it does not execute the ajax event, you lose the value of the date.
<p:commandButton value="AƱadir dia" update="dataTable" actionListener="#{regDPNL.registrarNuevoDia}" />
<p:dataTable id="dataTable" var="dpnl" value="#{regDPNL.listdpnl}" paginatorPosition="top"
rows="20" rowIndexVar="rowIndex" editable="true" editMode="cell"
<p:ajax event="cellEdit" listener="#{regDPNL.onCellEdit}" />
<p:column width="25%">
<f:facet name="header">
<h:outputText value="NOMBRE" />
</f:facet>
<p:cellEditor>
<f:facet name="output"><p:inputText value="#{dpnl.nombre}" /></f:facet>
<f:facet name="input"><p:inputText value="#{dpnl.nombre}" /></f:facet>
</p:cellEditor>
</p:column>
<p:column width="20%">
<f:facet name="header">
<h:outputText value="DESDE" />
</f:facet>
<p:cellEditor>
<f:facet name="output"><p:inputText value="#{dpnl.fechaDesde}" /></f:facet>
<f:facet name="input"><p:calendar value="#{dpnl.fechaDesde}" pattern="dd/MM/yyyy" /></f:facet>
</p:cellEditor>
</p:column>
<p:column width="20%">
<f:facet name="header">
<h:outputText value="HASTA" />
</f:facet>
<p:cellEditor>
<f:facet name="output"><p:inputText value="#{dpnl.fechaHasta}" /></f:facet>
<f:facet name="input"><p:calendar value="#{dpnl.fechaHasta}" pattern="dd/MM/yyyy" /></f:facet>
</p:cellEditor>
</p:column>
<p:column width="5%">
<f:facet name="header">
<h:outputText value="ELIMINAR" />
</f:facet>
<p:commandButton icon="ui-icon-editar" title="Delete Periodo" style="background:#fff">
</p:commandButton>
</p:column>
</p:dataTable>
Java code:
private List<DetallePeriodoBean> listdpnl = new PeriodoNoLaborable();
private DetallePeriodoBean detallePeriodoNoLaborable = new ArrayList<DetallePeriodoBean>();
public void registrarNuevoDia() {
detallePeriodoNoLaborable = new DetallePeriodoBean();
this.listdpnl.add(detallePeriodoNoLaborable);
}
public void onCellEdit(CellEditEvent event) {
Object oldValue = event.getOldValue();
Object newValue = event.getNewValue();
if(newValue != null && !newValue.equals(oldValue)) {
System.out.println("==> Old: " + oldValue + ", New:" + newValue);
}
}
http://s2.subirimagenes.com/imagen/previo/thump_8690487captura.png

I have faced this problem.
The solution is very simple (after a lot of testing and error)
You must add id attribute to your tag,
for instance:
<p:calendar id="date_selector" value="#{dpnl.fechaHasta}" pattern="dd/MM/yyyy" />

At the facet named output use the tag h:outputText instead of p:inputText

make sure you use java.util.date for your date fields(i.e fechaDesde etc) in your bean.

Related

using <p:dataTable> cellEdit event is never fired in Primefaces

I am having issue in firing an ajax call on the cellEdit event of a Data Table. The table shows up just fine on the UI but nothing happens when I click any of the cell.
xhtml
<h:form>
<p:dataTable id="decisionTree" var="tree"
value="#{treeBean.content}" editable="true" editMode="cell"
styleClass="smallGrid">
<f:facet name="header">
Notes Decision Tree
</f:facet>
<p:ajax event="cellEdit" listener="#{treeBean.onCellEdit}"
immediate="true" update=":#{p:component('notesTextArea')}" />
<p:column headerText="Comment Type">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{tree.commentType}" />
</f:facet>
<f:facet name="input">
<p:inputText value="#{tree.commentType}" disabled="true" />
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="MTCNs">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{tree.mtcns}" />
</f:facet>
<f:facet name="input">
<p:inputText value="#{tree.mtcns}" disabled="true" />
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Call Type">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{tree.callType}" />
</f:facet>
<f:facet name="input">
<p:inputText value="#{tree.callType}" disabled="true" />
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Phone">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{tree.phone}" />
</f:facet>
<f:facet name="input">
<p:inputText value="#{tree.phone}" disabled="true" />
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Dispute Reason">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{tree.disputeReason}" />
</f:facet>
<f:facet name="input">
<p:inputText value="#{tree.disputeReason}" disabled="true" />
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Placement Decision">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{tree.placementDescision}" />
</f:facet>
<f:facet name="input">
<p:inputText value="#{tree.placementDescision}" disabled="true" />
</f:facet>
</p:cellEditor>
</p:column>
<!--
<p:column>
<p:rowEditor />
</p:column>
-->
</p:dataTable>
</h:form>
Here is the Bean.
#Component("treeBean")
#Scope(value = "view", proxyMode = ScopedProxyMode.TARGET_CLASS)
public class TreeBean {
private List<TreeDto> content;
private String result="";
public List<TreeDto> getContent() {
return content;
}
public void setContent(List<TreeDto> content) {
this.content = content;
}
#PostConstruct
public void init() {
content=new ArrayList<TreeDto>();
TreeDto dto1=new TreeDto();
dto1.setCommentType("First Attempt");
dto1.setMtcns("mtcn1");
dto1.setCallType("OBC");
dto1.setPhone("8975730838");
dto1.setDisputeReason("Fraud");
dto1.setPlacementDescision("Write Off");
content.add(dto1);
}
public void onCellEdit(CellEditEvent event) {
RequestContext.getCurrentInstance().showMessageInDialog(new FacesMessage(FacesMessage.SEVERITY_INFO, "Status","something clicked"));
}
}
My intention to capture the value of the cells clicked. But I am not able to get an event fired in the first place on cell edit. Please give me some suggestions on how to resolve this.
Try to add a widgetVar to your dataTable and then edit your cell with a contextMenu for your data table, which call onclick="PF('yourWidgetVar').showCellEditor();return false;"
Somenthing like this
<p:contextMenu for="decisionTree" widgetVar="cMenu">
<p:menuitem value="Edit Cell" icon="ui-icon-search" onclick="PF('yourWidgetVar').showCellEditor();return false;"/>
<p:menuitem value="Hide Menu" icon="ui-icon-close" onclick="PF('cMenu').hide()"/>
</p:contextMenu>
You can take a look to Primefaces documentation too:
https://www.primefaces.org/showcase/ui/data/datatable/edit.xhtml

How to update Cells dynamically in Primefaces Data Table

I've a scenario Like i'll use cell Edit in Data Table.
I've two cells
I've 1st Cell is Editable
2nd Cell Value needs to be Displayed by doing some arithmetic operations on 1st Cell input (Eg: 2nd cell value =(1st cell value)*.14
My Code is Like
<p:dataTable id="cars2" var="car" value="#{dtEditView.cars2}" editable="true" editMode="cell" widgetVar="cellCars">.
<p:ajax event="cellEdit" listener="#{dtEditView.onCellEdit}" update=":form:msgs" />
<p:column headerText="Cell 1">
<p:cellEditor>
<f:facet name="output"><h:outputText value="#{car.id}" /></f:facet>
<f:facet name="input"><p:inputText id="modelInput" value="#{car.id}" style="width:96%"/>
<p:ajax event="keyup" listener="#{car.yearupdate}" update="2:3"></p:ajax></f:facet>
</p:cellEditor>
</p:column>
<p:column id="2" headerText="Cell 2">
<f:facet name="output"><h:outputText id="3" value="#{car.year}" /></f:facet>
</p:column>
</p:dataTable>
I want to Know the Java Code for Listener method code to update the 2nd cell value
In xhtml we need to call the listener (p:ajax tag).
in bean update the other column data in bulk ( iterate over all search records and update corressponding valuefor all recs ) ..
xhtml code like
<p:dataTable id="listDetails" value="${managedBean.searchList}" var="row">
<p:ajax event="rowEdit" listener="#{managedBean.onRowEdit}"
update=":managedBean:messages" />
<p:ajax event="rowEditCancel" listener="#{managedBean.onRowCancel}" update=":managedBean:messages" />
<p:column priority="17"
headerText="col 1"
styleClass="wrap text-right" style="width: 140px;">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{row.val1}" />
</f:facet>
<f:facet name="input">
<p:inputText id="modelInput" value="#{row.val1}"
<p:ajax event="blur" listener="#{managed.valueUpdate}"
update="tempValue></p:ajax>
</p:inputText>
</f:facet>
</p:cellEditor>
</p:column>
<p:column priority="2" headerText="Col 2" exportable="true">
<p:cellEditor>
<f:facet name="output">
<h:outputText id="value" value="#{row.value}" />
</f:facet>
<f:facet name="input">
<h:outputText id="tempValue" value="#{row.tempValue}" />
</f:facet>
</p:cellEditor>
</p:column>
in Bean
public void valueUpdate(){
for (BO bo : searchList) {
if(bo.val1!=null)
{
bo.value = bo.val1+50; // here u can do calc and assihn to the
bo.tempValue=bo.value;
}
}
}

Primefaces editable datatable inserting itself on row edit?

I am trying to put together a datatable to display some company information using Primefaces and java hosted with Tomcat7. Unfortunately due to sensitive information, I cannot give specifics about the data I'm working with. My code has been modified only to change variable names to more generic ones, and to remove business logic that doesn't touch the page.
I've got just about everything working, except when I try to add a new row to my datatable, it inserts the entire table into itself at the row that I was editing. This also happens when just cancelling the edit.
This is very confusing, considering I'm only inserting an item into a List object, which is in turn being fed into the table by Primefaces.
Here is the contents of my xhtml:
<h:form id="form">
<p:growl id="msgs" showDetail="true"/>
<p:dataTable var="object" value="#{page.objectList}" id="tableName"
scrollable="false"
liveResize="true"
resizableColumns="true"
editable="true"
sortMode="multiple"
reflow="true"
paginator="true"
rows="20"
paginatorTemplate="{CurrentPageReport} {PreviousPageLink} {PageLinks} {NextPageLink} {RowsPerPageDropdown}"
rowsPerPageTemplate="10,20,50,100">
<f:facet name="header">
Table Title
</f:facet>
<p:ajax event="rowEdit" listener="#{page.onRowEdit}" update=":form:msgs" />
<p:ajax event="rowEditCancel" listener="#{page.onRowCancel}" update=":form:msgs" />
<p:column headerText="col1">
<p:cellEditor>
<f:facet name="output"><h:outputText id="col1Output" value="#{object.col1item}" /></f:facet>
<f:facet name="input">
<p:inputText id="col1Input" value="#{object.col1item}" style="width:100%" />
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="col2">
<p:cellEditor>
<f:facet name="output"><h:outputText value="#{object.col2item}" /></f:facet>
<f:facet name="input">
<h:selectOneMenu value="#{object.col2item}" style="width:100%">
<f:selectItems value="#{object.categories}" var="col2item" itemLabel="#{col2item}" itemValue="#{col2item}" />
</h:selectOneMenu>
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="col3">
<p:cellEditor>
<f:facet name="output"><h:outputText id="col3Output" value="#{object.col3item}" /></f:facet>
<f:facet name="input">
<p:inputText id="col3Input" value="#{object.col3item}" style="width:100%" />
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="col4">
<p:cellEditor>
<f:facet name="output"><h:outputText id="col4Output" value="$#{object.col4item}" /></f:facet>
<f:facet name="input">
<p:inputText id="col4Input" converterId="com.gvea.utilities.business.Money" value="#{object.col4item}" style="width:100%" />
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="col5">
<p:cellEditor>
<f:facet name="output"><h:outputText id="col5Output" value="#{object.col5item}" /></f:facet>
<f:facet name="input">
<p:inputText id="col5Input" value="#{object.col5item}" style="width:100%" />
</f:facet>
</p:cellEditor>
</p:column>
<p:column style="width:32px">
<p:rowEditor/>
</p:column>
</p:dataTable>
</h:form>
and the onRowEdit and onRowCancel:
public void onRowEdit(RowEditEvent event) {
/*-- modify object --*/
...
objectList.add(0, newObject);
/*-- Give success or failure message --*/
}
public void onRowCancel(RowEditEvent event) {
FacesMessage msg = new FacesMessage("Edit Cancelled", "");
FacesContext.getCurrentInstance().addMessage(null, msg);
}
The objectList.add(...) is the only place where I do anything that could potentially chance the page... and I've verified that "newObject" is in fact an instance of the right class. Yet still I end up getting this:
Thanks for any help!
As it turns out, I wasn't updating the datatable on the lines:
<p:ajax event="rowEdit" listener="#{page.onRowEdit}" update=":form:msgs" />
<p:ajax event="rowEditCancel" listener="#{page.onRowCancel}" update=":form:msgs" />
simply adding form to the update line fixed my issue. Like so:
<p:ajax event="rowEdit" listener="#{page.onRowEdit}" update=":form:msgs form" />
<p:ajax event="rowEditCancel" listener="#{page.onRowCancel}" update=":form:msgs form" />

PrimeFaces editable cell doesn't update the value

So I am trying to use a PrimeFaces data table to set data to a list as follows;
<h:form id="frmSalarySupplement">
<p:panel>
<p:dataTable id="tblSalarySupplement"
value="#{salSupplementMB.dataListFromDB}"
var="salSupp"
rowIndexVar="rowSn"
scrollable="true"
rows="10"
paginator="true"
editable="true"
editMode="cell"
rowsPerPageTemplate="10,20,50,100">
<p:ajax event="cellEdit"
listener="#{salSupplementMB.onCellEdit}"
update="#this" />
<p:column headerText="#" escape="false"
style="white-space:pre-line;
word-break:break-all;
width:20px;
text-align:center;">
<h:outputText value="#{rowSn+1}" />
</p:column>
<p:column headerText="Name"
style="white-space:pre-line;
word-break:break-all;
width:250px;">
<h:outputText value="#{salSupp.empId.name}" />
</p:column>
<p:column headerText="Designation"
style="white-space:pre-line;
word-break:break-all;
width:150px;">
<h:outputText value="#{salSupp.empId.designation.designationName}" />
</p:column>
<p:column headerText="Allowance"
style="white-space:pre-line;
word-break:break-all;
width:100px;">
<p:cellEditor>
<f:facet name="input">
<h:inputText value="#{salSupp.allowance}"
style="width:100%" />
</f:facet>
<f:facet name="output">
<h:outputText value="#{salSupp.allowance}" />
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Special
Allowance"
style="white-space:pre-line;
word-break:break-all;
width:100px;">
<p:cellEditor>
<f:facet name="input">
<h:inputText value="#{salSupp.specialAllowance}"
style="width:100%" />
</f:facet>
<f:facet name="output">
<h:outputText value="#{salSupp.specialAllowance}" />
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Transport
Allowance"
style="white-space:pre-line;
word-break:break-all;
width:100px;">
<p:cellEditor>
<f:facet name="input">
<h:inputText value="#{salSupp.transportAllowance}"
style="width:100%" />
</f:facet>
<f:facet name="output">
<h:outputText value="#{salSupp.transportAllowance}" />
</f:facet>
</p:cellEditor>
</p:column>
</p:dataTable>
</p:panel>
</h:form>
So I want to be able to save the data I have edited on the cell to set it on the list. When I do the following, I don't get an updated value.
public void onCellEdit(CellEditEvent event) {
Object oldValue = event.getOldValue();
Object newValue = event.getNewValue();
}
Can someone suggest what shall I do with it?
Update
Also, can anyone tell me why my table loads multiple times when I edit the value? Maybe that's what's giving me the problem.

Cell edit in primefaces is not updating the value

I have a datatable in my primefaces application . The code for the frontend has
<!-- Start of customer datatable -->
<p:dataTable var="customer" value="#{customerBean.customers}" paginator="true" selection="#{customerBean.selectedCustomer}"
selectionMode="single" onRowSelectUpdate=":custList" onRowSelectComplete="custTab.show()" id="custList" widgetVar="custList" update=":custList">
<f:facet name="header">
List of Customers
<p:outputPanel>
<p:commandButton value="+" type="button" onclick="addCustDlg.show()"/>
</p:outputPanel>
</f:facet>
<p:column sortBy="#{customer.id}" filterBy="#{customer.id}" update=":custList">
<f:facet name="header">
<h:outputText value="ID"/>
</f:facet>
<h:outputText value="#{customer.id}"/>
</p:column>
<p:column sortBy="#{customer.name}" filterBy="#{customer.name}" headerText="NAME" filterMatchMode="contains" update=":custList">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{customer.name}"/>
</f:facet>
<f:facet name="input">
<p:inputText value="#{customer.name}"/>
</f:facet>
</p:cellEditor>
</p:column>
<p:column sortBy="#{customer.description}" filterBy="#{customer.description}" headerText="DESCRIPTION">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{customer.description}"/>
</f:facet>
<f:facet name="input">
<p:inputText value="#{customer.description}"/>
</f:facet>
</p:cellEditor>
</p:column>
<p:column sortBy="#{customer.signupDate}" filterBy="#{customer.signupDate}" headerText="SIGN UP DATE">
<f:facet name="output">
<h:outputText value="#{customer.signupDate}"/>
</f:facet>
</p:column>
<p:column sortBy="#{customer.validUntil}" filterBy="#{customer.validUntil}" headerText="EXPIRY DATE">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{customer.validUntil}"/>
</f:facet>
<f:facet name="input">
<p:inputText value="#{customer.validUntil}"/>
</f:facet>
</p:cellEditor>
</p:column>
<p:column sortBy="#{customer.status}" filterBy="#{customer.status}" headerText="STATUS">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{customer.status}"/>
</f:facet>
<f:facet name="input">
<p:inputText value="#{customer.status}"/>
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="CREATION DATE" sortBy="#{customer.creationDate}" filterBy="#{customer.creationDate}">
<f:facet name="output">
<h:outputText value="#{customer.creationDate}"/>
</f:facet>
</p:column>
<p:column headerText="LAST UPDATE DATE" sortBy="#{customer.lastUpdateDate}" filterBy="#{customer.lastUpdateDate}">
<f:facet name="output">
<h:outputText value="#{customer.lastUpdateDate}"/>
</f:facet>
</p:column>
<p:column headerText="Options">
<p:rowEditor/>
</p:column>
</p:dataTable>
<!-- End of dataTable (customer datatable) -->
And the function for handling the rowEvent is specified in the bean as
public void custRowEdit(RowEditEvent event){
Customer cust = (Customer) event.getObject();
EntityManagerHelper.beginTransaction();
custDao.update(cust);
EntityManagerHelper.commit();
}
However , on an update event , when I am editing the cell in the table , I do not get the new updated value of the attribute .
Like in the image below , when I edit the status of the entry with ID 1 from 11 to 4 , in the function custRowEdit , when I try to get the customer object , I still get the status of the customer as 11 and not 4 .
Can anyone help me with understanding why the value of the cell is not being set ?
from Where You are invoking custRowEdit(RowEditEvent event) method. I have not any related thing in your code.
In order to make your listener invoke add below attribute in your datatable declaration.
rowEditListener="#{customerBean.listenerInBackingBean}"
<p:dataTable var="customer" value="#{customerBean.customers}" paginator="true" selection="#{customerBean.selectedCustomer}"
selectionMode="single" onRowSelectUpdate=":custList" onRowSelectComplete="custTab.show()" id="custList" widgetVar="custList" update=":custList">
<f:facet name="header"
rowEditListener="#{customerBean.cutRowEvent}"
>
Check the implementation of customerBean.customers. I reloaded the content from the database every time the method got called. Wrong. This should happen in the constructor instead. Now everything works fine. Thought it was a JavaScript error ...
Thanks this helped me.
May I add that instead of loading the list from a query in the constructor, if one has a #SessionScoped managed bean one can instead use a reset() method to reset lists to null and then lazily populate the lists from the query. The reset can then be called on page load using an f:event:
<f:view>
<f:metadata>
<f:event type="preRenderView" listener="#{sessionScopedBean.reset}"/>
</f:metadata>
</f:view>
I encountered a similar situation that was resolved by removing the update="" tag from the dataTable. The table's default behavior is to update the row, which evidently, in my case, was not occurring.
You are missin the p:ajax event to trigger the method, function or whatever you wanna do after the cell editing
it's something like
<p:ajax event="cellEdit" listener="#{mBean.onCellEdit}" update="elementX" />

Resources