smartgwt - listgrid editing by cell having some problem - smartgwt

Question

I made listgid which can be edited by cell.
For testing I added save button. When I click on save button then listgrid's first record(updated first column value on first row) should be appear on pop up, but its not showing updated value on pop up.
For example in this case there is first listgrid record name->jon, i edited jon to shobhit and then click on save button. After clicking on save button I should get name shobhit but its showing jon which is the old value.
Please have a look on below my code and help me to accomplish this interesting task.
public void onModuleLoad() {
VLayout vLayout = new VLayout(10);
final ListGrid listGrid = new ListGrid();
ListGridField nameField = new ListGridField("name","Name");
nameField.setWidth(100);
nameField.setAlign(Alignment.CENTER);
ListGridField ageField = new ListGridField("age","Age");
ageField.setWidth(100);
ageField.setAlign(Alignment.CENTER);
ListGridField locationField = new ListGridField("location","Location");
locationField.setWidth(100);
locationField.setAlign(Alignment.CENTER);
listGrid.setFields(nameField, ageField, locationField);
listGrid.setDataSource(getDS());
listGrid.setWidth(310);
listGrid.setHeight(224);
listGrid.setAutoFetchData(true);
listGrid.setCanEdit(true);
listGrid.setEditEvent(ListGridEditEvent.CLICK);
listGrid.setEditByCell(true);
vLayout.addMember(listGrid);
IButton saveButton = new IButton("Save");
saveButton.addClickHandler(new ClickHandler() {
#Override
public void onClick(ClickEvent event) {
ListGridRecord[] record = listGrid.getRecords();
Record r = record[0];
SC.say(r.getAttributeAsString("name"));
}
});
vLayout.addMember(saveButton);
RootPanel.get("gwtContent").add(vLayout);
}
private RestDataSource getDS() {
RestDataSource ds = new RestDataSource();
DataSourceTextField nameField=new DataSourceTextField("name", "Name");
DataSourceIntegerField ageField=new DataSourceIntegerField("age", "Age");
DataSourceTextField locationField=new DataSourceTextField("location", "Location");
ds.setFields(nameField, ageField, locationField);
ds.setDataFormat(DSDataFormat.JSON);
OperationBinding fetchOB = new OperationBinding();
fetchOB.setOperationType(DSOperationType.FETCH);
OperationBinding addOB = new OperationBinding();
addOB.setOperationType(DSOperationType.ADD);
addOB.setDataProtocol(DSProtocol.POSTPARAMS);
OperationBinding updateOB = new OperationBinding();
updateOB.setOperationType(DSOperationType.UPDATE);
updateOB.setDataProtocol(DSProtocol.POSTPARAMS);
OperationBinding removeOB = new OperationBinding();
removeOB.setOperationType(DSOperationType.REMOVE);
removeOB.setDataProtocol(DSProtocol.POSTPARAMS);
ds.setOperationBindings(fetchOB, addOB, updateOB, removeOB);
if (!GWT.isScript()){
ds.setFetchDataURL("data/dataIntegration/json/data-fetch.js");
ds.setJsonRecordXPath("response/data");
}else{
}
return ds;
}
JSON data file:
{
response: {
status: 0,
startRow: 0,
endRow: 4,
totalRows: 5,
data: [
{"name":"Jon", "age":40, "location":"USA"},
{"name":"Tom", "age":30, "location":"USA"},
{"name":"Frank", "age":35, "location":"USA"},
{"name":"Deb", "age":24, "location":"USA"},
{"name":"Leroy", "age":70, "location":"USA"}
]
}
}

Answer 1

Use the addRowEditorExitHandler for listgrid.This will not require a save button.
Once you make changes and click any where outside grid, control will automatically come to addRowEditorExitHandler.
ListGrid listGrid = new ListGrid();
listGrid.setCanEdit(true);
listGrid.setAutoSaveEdits(false);
listGrid.setDataSource(getDS());
listGrid.addRowEditorExitHandler(new RowEditorExitHandler() {
#Override
public void onRowEditorExit(final RowEditorExitEvent event) {
SC.say(event.getNewValues().get("name"));
//event.getNewValues gives a map of unsaved edits in edited row
//This values u can put to a new record and save it
}
});