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" />
Related
I have a requirement for an editable datatable that has a single column, lets say brand, that when set to "Other" will replace the editor in the next column, model - with an inputText rather than a selectOne. If any particular car brand is selected then the list of models for that brand is displayed. If "Other" is chosen then they can type in a model in an input text field. I can't seem to get the mechanics of this to work in primefaces using various combinations of rendered and events. Is this sort of inline switching of editing components based on the data in the row possible? I've built a simple example using the primefaces datatable demo for cars (and adding a field Model) to illustrate what I am attempting.
Page snippet
<p:dataTable id="cars1" var="car" value="#{dtEditView.cars1}"
editable="true" style="margin-bottom:20px">
<f:facet name="header">
Row Editing
</f:facet>
<p:ajax event="rowEdit" listener="#{dtEditView.onRowEdit}"
update="cars1" />
<p:ajax event="rowEditCancel" listener="#{dtEditView.onRowCancel}"
update="cars1" />
<p:column headerText="Id">
<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:100%" />
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Year">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{car.year}" />
</f:facet>
<f:facet name="input">
<p:inputText value="#{car.year}" style="width:100%" label="Year" />
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Brand">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{car.brand}" />
</f:facet>
<f:facet name="input">
<h:selectOneMenu value="#{car.brand}" style="width:100%">
<f:selectItems value="#{dtEditView.brands}" var="man"
itemLabel="#{man}" itemValue="#{man}" />
<p:ajax event="change" immediate="true" update="model model_ti"></p:ajax>
</h:selectOneMenu>
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Model">
<p:cellEditor rendered="#{car.brand != 'Other'}">
<f:facet name="output">
<h:outputText value="#{car.model}" />
</f:facet>
<f:facet name="input">
<h:selectOneMenu value="#{car.model}" style="width:100%"
id="model">
<f:selectItems value="#{dtEditView.getModels(car.brand)}"
var="man" itemLabel="#{man}" itemValue="#{man}" />
</h:selectOneMenu>
</f:facet>
</p:cellEditor>
<p:cellEditor rendered="#{car.brand == 'Other'}">
<f:facet name="output">
<h:outputText value="#{car.model}" />
</f:facet>
<f:facet name="input">
<h:inputText value="#{car.model}" style="width:100%"
id="model_ti" />
</f:facet>
</p:cellEditor>
</p:column>
Thanks!
I was able to solve this problem by putting an ID on the cell editor for model, and adding that to the update list when changing brand.
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;
}
}
}
I've followed PrimeFaces showcases to use row editing datatable but i can't see why it's not updating data.
here's my datatable:
<p:dataTable id="tab" var="art" value="#{myMB.allArticles}" editable="true" style="margin-bottom:20px">
<f:facet name="header">
</f:facet>
<p:ajax event="rowEdit" listener="#{myMB.onRowEdit}" update=":form:msgs" />
<p:ajax event="rowEditCancel" listener="#{myMB.onRowCancel}" update=":form:msgs" />
<p:column headerText="Name ">
<p:cellEditor>
<f:facet name="output"><h:outputText value="#{art.name}" /></f:facet>
<f:facet name="input"><p:inputText id="modelInput" value="#{art.name}" style="width:100%"/></f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Budget">
<p:cellEditor>
<f:facet name="output"><h:outputText value="#{art.budget}" /></f:facet>
<f:facet name="input"><p:inputText value="#{art.budget}" style="width:100%" label="Budget"/></f:facet>
</p:cellEditor>
</p:column>
<p:column style="width:32px">
<p:rowEditor />
</p:column>
</p:dataTable>
and in the bean:
public void onRowEdit(RowEditEvent event ) {
Article f = (Article) event.getObject();
formationFacade.update(f);
FacesMessage msg = new FacesMessage("Article Edited", ((Article) event.getObject()).getName());
FacesContext.getCurrentInstance().addMessage(null, msg);
}
I ve seen this : link but it doesn't work for me I get the old value after editing and I have no change in may database .. can someone help me please?
There's one thing that is strange/wrong, that may or may not be the cause of your issues, but I would recommend fixing. From this update=":form:msgs" I assume that you have an enclosing tags like <h:form id="form"><p:growl id="msgs". On the other hand you repeat the id="form" inside <p:dataTable id="form". Repeating the id is surely wrong, but I'm not sure if its the cause of your issue
first, you have to provide the EditMode parameter with the value of
CellEdit
or RowEdit as your case.
second, you can do edit like this without event if you want a simple way to edit data table is
modifyYourModel(Model x){
// call your function to modify
}
and in the data table, you can do that
<p:dataTable id="tab" var="art" value="#{myMB.allArticles}" editable="true" EditMode="rowEdit" style="margin-bottom:20px">
<f:facet name="header">
</f:facet>
<p:ajax event="rowEdit" listener="#{myMB.modifyYourModel(art)}" update=":form:msgs" />
<p:ajax event="rowEditCancel" listener="#{myMB.onRowCancel}" update=":form:msgs" />
Use your IDs instead of :form, :msgs.
<p:ajax event="rowEdit" listener="#{myMB.onRowEdit}" update="messages tab" />
<p:ajax event="rowEditCancel" listener="#{myMB.onRowCancel}" update="messages tab" />
Also you have to update list "allArticles" by edited object.
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.
I am working on a sample app with primefaces 3 , using datatables incell editing mode. Although when i edit , i see the event.getObjects gives me the object which is not modified.
Changed the property of the object on debug mode, it does update.
So i couldn't figure out why i cant get the edited property.
Below are my eventlistener method and the xhtml;
Any pointers are welcomed
Thanks in advance
EventListener
public void editListener(RowEditEvent event){
System.out.println("EDIT LISTENER");
update((Employer)event.getObject());
}
JSF :
<h:form id="form">
<h1><h:outputText value="List"/></h1>
<p:dataTable value="#{employer.employers}" var="item" paginator="true" rows="10" style="width:300px">
<p:column>
<f:facet name="header">
<h:outputText value="Id"/>
</f:facet>
<h:outputText value="#{item.id}"/>
</p:column>
<p:column headerText="Name">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{item.name}"/>
</f:facet>
<f:facet name="input">
<p:inputText value="#{item.name}"></p:inputText>
</f:facet>
</p:cellEditor>
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Surname"/>
</f:facet>
<h:outputText value="#{item.surname}"/>
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Phone"/>
</f:facet>
<h:outputText value="#{item.phone}"/>
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Email"/>
</f:facet>
<h:outputText value="#{item.email}"/>
</p:column>
<p:column headerText="Options" style="width:50px">
<p:rowEditor />
</p:column>
<p:ajax event="rowEdit" listener="#{employer.editListener}"></p:ajax>
</p:dataTable>
</h:form>
After this...
<p:dataTable value="#{employer.employers}" var="item" paginator="true"
rows="10" style="width:300px">
...put the following:
<p:ajax event="rowEdit" update="#this" listener="#{HandlerClassName.rowEditListener}" />