Primefaces datatable in-cell edit to update other rows in the same datatable with ajax rowEdit event processing
Posted
by
Java Thu
on Stack Overflow
See other posts from Stack Overflow
or by Java Thu
Published on 2012-05-24T20:06:30Z
Indexed on
2013/10/18
15:55 UTC
Read the original article
Hit count: 1124
Filed under:
jsf
|primefaces
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>
© Stack Overflow or respective owner
