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

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

<script type="text/javascript">

    jQuery(document).ready(function(){
      var lastcell; 
      jQuery("#grid").jqGrid({
          url:'{{ json_data_handler }}?year={{ get_param_year }}&month={{ get_param_month }}&project_id={{ get_param_project_id }}',
          datatype: "json",
          mtype: 'GET',
          colNames:['hour_record_pk', 'project_pk', 'weekday', 'date', 'sum', 'description'],
          colModel:[
                    {name:'hour_record_pk',index:'hour_record_pk', width:55, sortable:false, editable:true, editoptions:{readonly:true,size:10}},
                    {name:'project_pk',index:'project_pk', width:55, sortable:false, editable:true, editoptions:{readonly:true,size:10}},
                    {name开发者_如何学编程:'weekday',index:'weekday', width:300, editable:false, sortable:false},
                    {name:'date_str',index:'date_str', width:300, editable:true, sortable:false, editoptions:{readonly:true}},
                    {name:'sum',index:'sum', width:100, editable:true, sortable:true,editrules:{number:true,minValue:0,maxValue:24,required:true}},
                    {name:'description',index:'description', width:600, editable:true, sortable:false,},
               ],
         jsonReader : {
              repeatitems:false
         },
          rowNum:31,
          rowList:[10,20,31],
          //pager: jQuery('#gridpager'),
          sortname: 'id',
          viewrecords: true,
          sortorder: "asc",
          width: 800,
          height: 750,
          caption:"Hour Record Overview",
          reloadAfterEdit: true, //seems to have no effect
          reloadAfterSubmit: true, //seems to have no effect
          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 %}"
     }).navGrid('#gridpager');
    });

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

I created already a reload method but I'm not sure where to put it in. I tried:

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

but this is already called when the user clicks into a row. The code above allows the user to click into a row and when pressing enter the data is submitted and the record updated or created.

After the user created a new object I have to reload the grid, since I need the object id of the newly created object, in order to take care of further editing this row.

Edit: The solution:

onSelectRow: function(row_id){
             if(row_id != null) {
                if(row_id !== last_selected_row) {
                    jQuery('#grid').jqGrid('restoreRow',last_selected_row);
                    jQuery('#grid').jqGrid('saveRow',row_id)
                           .editRow(row_id, true,false,reload);
                    last_selected_row = row_id; 
                } else {
                    last_selected_row=row_id;
                }
              }
            },  

Update: For future reference. All users starting with js grids might also have a look at Slickgrid as I switched from jqgrid to slickgrid and can only recommend it.

---

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"); 
}

---

Try this

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

//

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


//

---

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.

---

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.

---

Ок, 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");
  }