Question

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.

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