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.

<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.

Deprived

Your final Edit: the solution helped me a lot. Thanks for the inclusion. – Gathering

I cannot make the above code to work, it gives me TypeError: jQuery("#tnc-list").jqGrid("saveRow", row_id).editRow is not a function – Twoup

Did not work for me, scroll down there's working code – Kotta

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

Abaddon

Actually all of the answers helped me to solve my problem. But this answer I think make me take a look into the right direction at most. See my solution code in the edit part of my question. Thanks. – Deprived

Where do I put jQuery('#grid').jqGrid("editRow", id, true, '', '', '', '', reload) – Twoup

Answer 2

Try this

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

//

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


//

Nur

Answer 3

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.

Vilmavim

yes but where do i have to put this function? I think I have to insert it into one of these events: trirand.com/jqgridwiki/doku.php?id=wiki:cell_editing .. but whether afterSubmitCell, afterEditCell or afterSaveCell fire after the cell update is send to the url: editurl:"{% url set_hour_record_json_set %}" – Deprived

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.

Unrestrained

Thanks.. that sounds reasonable but something does not work. Reload is not triggered. Why do you put jQuery('#grid').jqGrid('editRow', id, true, reload); at the beginning? When I put this at the start of my grid nothing works. But anyway.. getting the new id from the submit is exactly what I want to achieve. Maybe my description was a bit misleading. Do you know how I can get the new db id from the submit and place it in the jqgrid-row hour_record_pk? – Deprived

You have to know that my table consists of hour_records viewed for a month. But only where an hour record exists for a specific date the corresponding row has a db id from the database (presented in column hour_record_pk). When I edit a row which does not have an id the new values are submitted to the db and it creates a new hour record. Then I need either a reload of the grid to get the db id or i get somehow the new db id from the submit. Otherwise I get a problem if the user wants to change the newly created hour record, since I do not know at server-side which hour-record to change. – Deprived

Answer 5

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

Kotta