How to perform action in jqGrid after adding new row

Question

is there an event in jqGrid to perform an action after adding new row?

I see in jqGrid wiki that there is event afterInsertRow, but apparently it is triggered whenever jqGrid "inserts" rows to table while displaying the table.

Then what should I use when I want to do something after user "inserts" (saves) new row? Or, is there any variable that can let me "know" that new row was added?

Answer 1

The main problem is that to be able to select the row you need know the id of the new row. In the most situation the id will be generated by the database where you save the data on the server. So the first requirement to your server code is to return the id on the new row in the server response on the "add" operation.

For example your server code return the id of you row as the response on the "add" operation.

$("#list").jqGrid('navGrid', '#pager', {/*navGrid options*/}, {/*Edit optoins*/}, {
    /*Add options:*/
    reloadAfterSubmit: false,
    afterSubmit: function (response) {
        return [true, '', response.responseText];
    },
    addedrow: "last", // add new row at the end of grid
    afterComplete: function (response, postdata) {
        // this.gbox is the string like "#gbox_list"
        var gridId = this.gbox.substr(6);
        //if (postdata.oper === "add") {
        //    // highlight the new "added" row
        //    var row = $("#" + $.jgrid.jqID(postdata.id));
        //    row.effect("highlight", {}, 3000);
        //}
        $('#' + gridId).jqGrid('setSelection', postdata.id);
    }
});

In the commented part of afterComplete I shown how you can use jQuery UI highlight effect to highlight the new added row (see the old answer). It can be alternative to the selection of the row. You can also use both selection and highlighting effects.

The option reloadAfterSubmit: false has at least two disadvantages.

1. If use use sorted data in the grid (sortname parameter of jqGrid is not empty) the rows of the grid will be not correctly sorted after the new row will be added as the first or as the last row in the grid.
2. If the grid has already maximum rows per page (defined by rowNum parameter), the adding of new row will follow to the grid with too many rows per page.

So you can do the following

var idToSelect;

$("#list").jqGrid({
    // ... all jqGrid options
    loadComplete: function () {
        if (idToSelect) {
            $(this).jqGrid('setSelection', idToSelect);
            //$("#" + $.jgrid.jqID(idToSelect)).effect("highlight", {}, 3000);
            idToSelect = undefined;
        }
    }
}).jqGrid('navGrid', '#pager', {/*navGrid options*/}, {/*Edit optoins*/}, {
    /*Add options:*/
    afterSubmit: function (response) {
        // save the id of new row. If the format of the data returned from
        // the server is different you should change the next row
        // corresponds to the returned data. For example if the server returns
        // back JSON data in the form {"myId":"123"} you should use
        // $.parseJSON(response.responseText).myId
        // instead of response.responseText below
        idToSelect = response.responseText;
        return [true, '', response.responseText];
    }
});

In the case the new added row will be selected after the reloading of the grid.