I’ve been working quite extensively with jqGrid. Its nicely done, very flexible and is documented decently enough. That said, it does have its fair share of issues. Some issues involve spelling mistakes, even.

But I’ve moved past all those and hit a big solid roadblock on the jqGrid Inline Edit. The default behavior of inline editing is that if the edited row saves successfully with no errors, the grid can reload and reflect the newly updated record. If however, the server side validations (onSubmit aka Enter key press) failed, the edited row is restored to its last saved state, in non-edit mode. This results in the loss of any valid editing that the user has already done. You can read more about the problem here.

After struggling a bit and reading through the ‘grid.inlinedit.js’ file, I discovered this bit of code:

editRow : function(rowid,keys,oneditfunc,successfunc, url, extraparam, aftersavefunc,errorfunc, afterrestorefunc) {
// Compatible mode old versions
var settings = {
"keys" : keys || false,
"oneditfunc" : oneditfunc || null,
"successfunc" : successfunc || null,
"url" : url || null,
"extraparam" : extraparam || {},
"aftersavefunc" : aftersavefunc || null,
"errorfunc": errorfunc || null,
"afterrestorefunc" : afterrestorefunc|| null,
"restoreAfterErorr" : true
},
args = $.makeArray(arguments).slice(1), o;

if(args[0] && typeof(args[0]) == "object" && !$.isFunction(args[0])) {
o = $.extend(settings,args[0]);
} else {
o = settings;
}
// End compatible

What this really does is, introduces a backdoor solution to our problem. To be specific, the problem here is the ‘restoreAfterError’ parameter which is hardcoded as ‘true’. This attribute is responsible for the problem above. It forces the execution of the method that restores the errored out row. So, this attribute needs to be set to ‘false’ to let the errored out row remain in editable state with all changed values intact.

To do this, I did not want to change the signature of the ‘editRow’ method. And thankfully, I didn’t need to. Instead of the usual call :


jQuery("#grid_id").jqGrid('editRow',rowid, keys, oneditfunc, succesfunc, url, extraparam, aftersavefunc,errorfunc, afterrestorefunc);

Invoke the method like this instead:

grid.jqGrid('editRow', rowId, {"keys":true, "oneditfunc":"", "successfunc":Mmd.Callbacks.SuccessEdit, "url":url, "extraparam":{'_method': 'PUT'}, "aftersavefunc":Mmd.Callbacks.ReloadGrid, "errorfunc":Mmd.Callbacks.Error, "restoreAfterError":false});

This invocation sets the ‘args[0]‘ as an object (json: with ‘keys’ as the first key) and hence satisfies the ‘if’ condition. The ‘if’ path then sets the options as the json we send during method invocation. And this json sets the desired ‘restoreAfterError’ to false.

Okay, so step 1 done. Phew! Now that’s only half the battle won. The second issue is that once the errored row stays in editable mode, it cannot be saved again by hitting ‘Enter’. Read more about this problem here.

Now the solution to this is tricky. It involves commenting out (or deleting!) this line of code:

$(ind).unbind("keydown");

This is line #274 for me and is a part of ‘saveRow’ method definition in the ‘grid.inlineedit.js’ file. Take this line out and the ‘Enter’ key stays bound to the errored out row now in editable mode to correct the error and save again.

Hope this helps