jqgrid reload grid after successful inline update / inline creation of record

Question

I\'m wondering how I can trigger reloadGrid after an inline edit of a row.

Answer 1

Here is the syntax of the editRow function

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

oneditfunc: fires after successfully accessing the row for editing, prior to allowing user access to the input fields. The row's id is passed as a parameter to this function.

succesfunc: if defined, this function is called immediately after the request is successful. This function is passed the data returned from the server. Depending on the data from server; this function should return true or false.

aftersavefunc: if defined, this function is called after the data is saved to the server. Parameters passed to this function are the rowid and the response from the server request.

In your case if you want to grid reloaded after the row is saved the call to editRow method should read as follows.

jQuery('#grid').jqGrid("editRow", id, true, '', '', '', '', reload)

I have assigned your reload function which reloads the grid for 'aftersavefunc' parameter

the reload method itself should be defined as follows

function reload(rowid, result) {
  $("#grid").trigger("reloadGrid"); 
}

Answer 2

Have a look at the saveRow method:

saveRow (rowid, succesfunc, url, extraparam, aftersavefunc, onerrorfunc)

which defines two callback (successfuncs, aftersavefunc) to be called, when the request is completed successfully and after the data have been saved respectively.

Answer 3

Ок, now copy-paste solution that works at least for me

 onSelectRow: function(id){
    $('#grid').jqGrid("editRow", id, true, '', '', '', '', reloadTable);
 },
 // more confir

 // reload table after submit. Put it somewhere in your JS file
  function reloadTable(result) {
    $('#grid').trigger("reloadGrid");
  }

Answer 4

From the docs, I think afterSaveCell will work best for you (afterSubmitCell could work as well but it seems to require a specific return value. afterEditCell happens before the server hit occurs so that will be too soon).

jQuery('#grid').jqGrid('editRow', id, true, reload);

jQuery(document).ready(function(){
    var lastcell; 
   jQuery("#grid").jqGrid({

      // [snip earlier config]

      onSelectRow: function(id){    
            if(id && id!==lastcell){
                jQuery('#grid').jqGrid('restoreRow',lastcell);
                jQuery('#grid').jqGrid('editRow',id,true);
                lastcell=id;
                }
            }, 
      editurl:"{% url set_hour_record_json_set %}",
      onAfterSaveCell: reload
   }).navGrid('#gridpager');
});

function reload(result) {
    $("#grid").trigger("reloadGrid"); 
} 

However, reloading the entire grid is probably overkill given the information you've described so far. Unless there is server side processing of submitted information (meaning the data in the db might different after a save), reloading after a simple edit seems to me like a waste of time.

As for when you are creating a new row, again, unless there is server-side only data munging it seems like it would be easier to just get the new id from the submit and then make that individual change in jqGrid. However, in the end it depends a lot on how long it takes reload your whole table.

Answer 5

Try this

      $("#grid").jqGrid('editRow', rowid, true, null, null, null, {}, aftersavefunc);

//

        function aftersavefunc(rowid, result) {
        $("#grid").trigger("reloadGrid");
    }


//