jqGrid: Why aren't the events that I defined for a grid edit firing?

Question

I'm doing in-line edits on a grid, but can't seem to get any events to fire that would be tied to that edit.

Here I have afterSubmit: and I want it to fire after the user has edited the Quantity field in the grid, but it never fires.

$('#tblLines').jqGrid({
        url: createUrl('/CRA/GetLines/'),
        editurl: '/CRA/EditModifyLine',
        emptyrecords: '',
        datatype: 'json',
        mtype: 'GET',
        colNames: ['Group', 'Description', 'Quantity'],
        colModel: [
      { name: 'Group', index: 'Group', width: 100, align: 'left' },
      { name: 'Description', index: 'Description', width: 400, align: 'left' },
      { name: 'Quantity', index: 'Quantity', width: 150, align: 'left', editable: true },
        pager: jQuery('#pgrLines'),
        rowNum: 10,
        rowList: [5, 10, 20, 50],
        sortname: 'Group',
        sortorder: "desc",
        viewrecords: true,
        caption: 'Core Group Lines',
        onSelectRow: function(id) {
            $('#tblCoreGroupLines').editRow(id, true);
            lastsel = id;
        },
        afterSubmit: function(response, postdata) {
            alert('got here');
        },
        postData: { craId: $('#CraId').val() }
    });

I've tried defining the events lower as part of a navControl, but that doesn't work either. The in-line edit works fine -- the POST succeeds and the result comes back, it just never hits the events that should be tied to it. I've tried all the events that would tie to the changing of the Quantity field, but none of them work.

Have I defined the event in the correct place? Am I missing a property on the grid or something?

Answer 1

I think you need to pass in the afterSubmit in the properties argument to editRow.

Thus, you need to move the afterSubmit like so:

 .....
 onSelectRow: function(id) {
     $('#tblCoreGroupLines').editGridRow(id, { afterSubmit: function(response, postdata) {
           alert('got here');
        } 
     });
     lastsel = id;
},
...

The docs about editGridRow kind of help in this regard.

The above sample will cause a modal though (as that's the only spot where afterSubmit is used). If you want to do something after a successful update using an indline edit, you should be able to do the following inside of onSelectRow

 $('#tblCoreGroupLines').editGridRow(id,true, undefined, function(res) { 
    // res is the response object from the $.ajax call
    alert('success!!') 
 } );

Here's the method signature for editRow from js/grid.inlineedit.js

    editRow : function(rowid,keys,oneditfunc,succesfunc, url, extraparam, aftesarvefunc,errorfunc, afterrestorefunc) {

Answer 2

You could also use aftersavefunc event in editRow method to get server response if that is the only thing you are looking for.