How to reload the grid after inline edit? - php

Question

I'm using jqGrid PHP and adding an actions column.
The editing works fine but once the row is saved, the grid is not reloaded.
When I manually refresh the grid, the updated information appears.
I have tried adding edit options to the addCol (see below) but I read somewhere that editOptions only applies to form editing. Looking at the documentation, it seems like I could use the onSuccess or afterSave parameters but I am not sure how I would add the reloadAfterSubmit method to either of those parameters in PHP.
$grid->addCol(array(
"name"=>"Click to Edit",
"formatter"=>"actions",
"editable"=>false,
"sortable"=>false,
"resizable"=>false,
"fixed"=>true,
"width"=>45,
"loadonce"=>false,
"formatoptions"=>array("keys"=>true, "editbutton"=>true, "delbutton"=>false,"editOptions"=>array("reloadAfterSubmit"=>true))
), "first");

Answer 1

I'm using jQuery and jqGrid's cell editing feature which submits the new cell value to the server when leaving each cell. In my particualr app, when a cell changes it can affect other (calculated) columns in the same row AND possibly in other rows therefore I needed to update values which could be all over the grid.
In my case, the calculation itself is performed on the server when the cell is submitted and the database is updated so I needed to fetch the updated data to update the grid. I wanted to make the cell editing as fast as possible but also keep the rows updated. I also wanted to only update the rows that have been modified as determined by the server. I also wanted something that was generic and reusable.
I don't know how this translates to PHP but here's what I did in JavaScript.
var xhrUpdate = null;
// Handle jqGrid's afterSubmitCell.
$("#someGridId").jqGrid(
"setGridParam",
"afterSubmitCell",
function (response, rowid, name, val, iRow, iCol) {
// If an ajax request is already in progress from the last cell edit,
// abort it since the data is now moot with the new cell update.
// Sorry server, nobody's listening!
if (xhrUpdate != null) {
xhrUpdate.abort();
xhrUpdate = null;
}
// Call the generic grid update function (see below) asynchronously.
xhrUpdate = updateGrid(
"someGridId",
"someUpdateUrl",
{ someParam: someParamValue, ... },
"someIDFieldThatIdentifiesTheGridRow",
true);
// Return success.
return [true, ""];
});
// This function updates a jgGrid which already contains data.
// It will only update the rows and columns that are returned
// from the server.
function updateGrid(grid_id, url, data, idField, async) {
var grid = $("#" + grid_id)
return $.ajax({
async: async,
type: "GET",
datatype: "json",
url: url,
data: data,
success: function (result) {
// Loop over the returned rows.
$.each(result, function (index, row) {
// Loop over the returned fields in each row.
$.each(row, function (key, value) {
// Set the corresponding cell value.
// This won't touch any cell's that aren't
// represented in the JSON data.
grid.jqGrid("setCell", row[idField], key, value);
});
});
}
});
}
Things to note:
1) This definitely puts a load on the server.
2) Being asynchronous, this doesn't deal with bad cell data or other abnormal server responses from the cell submit. It very optimistic but those issues can be dealt with if need be.
3) The server needs to have the smarts to return the appropriate data or you can just return everything.
Sorry it's not PHP but I hope this helps.