Search code examples
javascriptjqueryjqgrid

jQgrid after save callback function


I have created a jQgrid and want it to call a callback function once a new row is added or some content is edited in the grid

jQuery("#list1").jqGrid({
        url: '/testGrid/sample?q=5', 
        datatype: "json", 
        mtype: 'POST',
        jsonReader: {
            page: "page",
            total: "total",
            root: "rows",
            records: "records",
            repeatitems: false,
            cell: "name",
            userdata: 'userdata'
        },
        width: 775,
          colNames: ['Salaried Employees', '# of FTEs', 'Budget', 'Actuals to Date', 'Invoice Salary'],
          colModel: [
            {name:'salEmp',index:'salEmp', width:100, align: 'left', width:100,editable:false,editrules:{required:true}},
            {name:'FTE',index:'FTE', width:100, align: 'center', editable:false,required:true,editrules:{required:true,number:true}},
            {name:'Budget',index:'Budget', width:100, align: 'right', width:100,editable:false,required:true,editrules:{required:true,number:true}},
            {name:'actDate',index:'actDate', width:100, align: 'right', align:"right",editable:false,required:true,editrules:{required:true,number:true}},
            {name:'invSal',index:'invSal', width:100, align:"right",editable:true,required:true,editrules:{required:true,number:true}}                                        
           ],
            rowNum: 5,
            rowList: [5, 10, 20],
            autoencode: true,
            ignoreCase: true,
            sortable: false,
            height: '100%',
            pager: jQuery('#pager1'),
            cellEdit: false,
            cellsubmit: 'remote',
            //cellurl: '/testGrid/sample',

            //call onclick of save
            editurl:"/testGrid/sample",
            gridview: true,
            reloadAfterSubmit:true
        })
        // Pager options for Subgrid
        .navGrid('#pager1',{
            add:false,
            edit:false,
            del:true,
            search:false,
            refresh:false,
            deltext: 'Delete'
        });
$('#list1').jqGrid('inlineNav','#pager1',{
            addtext: "Add",
            edittext: "Edit",
            savetext: "Save",
            canceltext: "Cancel",                       
            addParams: { 
                position: "afterSelected"
            },
            addedrow:'last'

        });

Solution

  • inlineNav allows to specify the callbacks of editRow used for inline editing. To specify the callbacks one can use editParams and addParams.addRowParams options:

    var myEditOptions = {
            keys: true,
            oneditfunc: function (rowid) {
                alert("row with rowid=" + rowid + " is editing.");
            },
            aftersavefunc: function (rowid, response, options) {
                alert("row with rowid=" + rowid + " is successfuly modified.");
            }
        };
    
    $('#list1').jqGrid('inlineNav','#pager1', {
        addtext: "Add",
        edittext: "Edit",
        savetext: "Save",
        canceltext: "Cancel",                       
        addParams: { 
            position: "afterSelected",
            addRowParams: myEditOptions
        },
        addedrow: "last",
        editParams: myEditOptions
    });