How to perform an action in jqGrid after adding a new row

Question

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

I see in the jqGrid wiki that there is an afterInsertRow event, but apparently it fires whenever jqGrid "inserts" rows into the table when the table is displayed,

Then what should I use when I want to do something after the user "inserts" (saves) a new line? Or, is there any variable that can let me “know” that a new line has been added?

Answer 1

The main problem is being able to select the row where you need the newline id. In most cases, the identifier will be generated by the database in which you save the data on the server. So, the first requirement for your server code is to return the identifier in a new line in the server response in the "add" operation.

For example, your server code returns the identifier of your string as a response to 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, afterCompleteI showed how you can use jQuery UI highlight to highlight a newly added row (see the old answer ). This may be an alternative to row selection. You can also use highlight and highlight effects.

reloadAfterSubmit: false .

• ( sortname jqGrid ), .
• ( rowNum), .

,

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

, .