Primefaces datatable in-cell edit to update other rows in the same datatable with ajax rowEdit event processing
- by Java Thu
I have issue to update other rows in the same datatable when one row updated using primeface datatable in-cell edit ajax rowEdit.
But failed to update other row with ajax call. The ajax response only return the same row data which was updated.
The codes are as following:
<h:form id="testForm">
<p:dataTable id="testDT" var="d" rowIndexVar="rowIndex"
value="#{testBean.lists}" editable="true">
<p:column>
<f:facet name="header">No</f:facet>
<h:outputText value="#{rowIndex}" />
</p:column>
<p:column headerText="Value">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{d.value}" />
</f:facet>
<f:facet name="input">
<p:inputText value="#{d.value}" size="5" />
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Edit" style="width:50px">
<p:outputPanel rendered="#{d.editable}">
<p:rowEditor>
</p:rowEditor>
</p:outputPanel>
</p:column>
<p:ajax event="rowEdit" update=":testForm:testDT"
listener="#{testBean.onRowUpdate}" />
</p:dataTable>
</h:form>
My TestBean:
package web.bean.test;
import java.util.ArrayList;
import java.util.List;
import javax.annotation.PostConstruct;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;
import org.primefaces.event.RowEditEvent;
@ManagedBean(name="testBean")
@ViewScoped
public class TestBean {
private List<TestData> lists = new ArrayList<>();
@PostConstruct
protected void init() {
TestData d = new TestData("Row1Data", 1d, true);
lists.add(d);
d = new TestData("Row1Data", 11.11d, false);
lists.add(d);
}
public void onRowUpdate(RowEditEvent event) {
Object o = event.getObject();
if (o != null) {
TestData d = (TestData)o;
TestData d1 = lists.get(1);
d1.setValue(d1.getValue() + d.getValue());
}
}
public List<TestData> getLists() {
return lists;
}
public void setLists(List<TestData> lists) {
this.lists = lists;
}
}
package web.bean.test;
public class TestData {
private String name;
private double value;
private boolean editable;
public TestData(String name, double value, boolean editable) {
super();
this.name = name;
this.value = value;
this.editable = editable;
}
public TestData() {
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public double getValue() {
return value;
}
public void setValue(double value) {
this.value = value;
}
public boolean isEditable() {
return editable;
}
public void setEditable(boolean editable) {
this.editable = editable;
}
}
The ajax response body:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><link type="text/css" rel="stylesheet" href="/Octopus-G/javax.faces.resource/theme.css.xhtml?ln=primefaces-bluesky" /><link type="text/css" rel="stylesheet" href="/Octopus-G/javax.faces.resource/primefaces.css.xhtml?ln=primefaces&v=3.2" /><script type="text/javascript" src="/Octopus-G/javax.faces.resource/jquery/jquery.js.xhtml?ln=primefaces&v=3.2"></script><script type="text/javascript" src="/Octopus-G/javax.faces.resource/primefaces.js.xhtml?ln=primefaces&v=3.2"></script></head><body>
<form id="testForm" name="testForm" method="post" action="/Octopus-G/test.xhtml" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="testForm" value="testForm" />
<div id="testForm:testDT" class="ui-datatable ui-widget"><table role="grid"><thead><tr role="row"><th id="testForm:testDT:j_idt5" class="ui-state-default" role="columnheader"><div class="ui-dt-c"><span>No</span></div></th><th id="testForm:testDT:j_idt8" class="ui-state-default" role="columnheader"><div class="ui-dt-c"><span>Value</span></div></th><th id="testForm:testDT:j_idt12" class="ui-state-default" role="columnheader" style="width:50px"><div class="ui-dt-c"><span>Edit</span></div></th></tr></thead><tfoot></tfoot><tbody id="testForm:testDT_data" class="ui-datatable-data ui-widget-content"><tr data-ri="0" class="ui-widget-content ui-datatable-even" role="row"><td role="gridcell"><div class="ui-dt-c">0</div></td><td role="gridcell" class="ui-editable-column"><div class="ui-dt-c"><span id="testForm:testDT:0:j_idt9" class="ui-cell-editor"><span class="ui-cell-editor-output">1.0</span><span class="ui-cell-editor-input"><input id="testForm:testDT:0:j_idt11" name="testForm:testDT:0:j_idt11" type="text" value="1.0" size="5" class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all" /><script id="testForm:testDT:0:j_idt11_s" type="text/javascript">PrimeFaces.cw('InputText','widget_testForm_testDT_0_j_idt11',{id:'testForm:testDT:0:j_idt11'});</script></span></span></div></td><td role="gridcell" style="width:50px"><div class="ui-dt-c"><span id="testForm:testDT:0:j_idt13"><span id="testForm:testDT:0:j_idt14" class="ui-row-editor"><span class="ui-icon ui-icon-pencil"></span><span class="ui-icon ui-icon-check" style="display:none"></span><span class="ui-icon ui-icon-close" style="display:none"></span></span></span></div></td></tr><tr data-ri="1" class="ui-widget-content ui-datatable-odd" role="row"><td role="gridcell"><div class="ui-dt-c">1</div></td><td role="gridcell" class="ui-editable-column"><div class="ui-dt-c"><span id="testForm:testDT:1:j_idt9" class="ui-cell-editor"><span class="ui-cell-editor-output">11.11</span><span class="ui-cell-editor-input"><input id="testForm:testDT:1:j_idt11" name="testForm:testDT:1:j_idt11" type="text" value="11.11" size="5" class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all" /><script id="testForm:testDT:1:j_idt11_s" type="text/javascript">PrimeFaces.cw('InputText','widget_testForm_testDT_1_j_idt11',{id:'testForm:testDT:1:j_idt11'});</script></span></span></div></td><td role="gridcell" style="width:50px"><div class="ui-dt-c"></div></td></tr></tbody></table></div><script id="testForm:testDT_s" type="text/javascript">$(function() {PrimeFaces.cw('DataTable','widget_testForm_testDT',{id:'testForm:testDT',editable:true,behaviors:{rowEdit:function(event) {PrimeFaces.ab({source:'testForm:testDT',process:'testForm:testDT',update:'testForm:testDT',event:'rowEdit'}, arguments[1]);}}});});</script><input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="-8223787210091934199:-360328890338571623" autocomplete="off" />
</form></body>
</html>
