jqGrid—Reloading Data

Question

I'm trying to add an item to my data source, and then re-load the grid based on this answer. The grid loads fine. The addItemToGrid gets called a few times, and I'm verifying that the underlying tableSrc object is getting added to, but the grid remains unchanged.

    var tableSrc = { "rows": [
        { "title": "Title1", "subtitle": "subTitle", "authors": ["a1", "a2", "a3"] },
        { "title": "Title2", "subtitle": "subtitle", "authors": ["X", "Y"] },
        { "title": "Title3", "subtitle": "subTitle", "authors": ["1", "2", "3", "4"]}]
    };

    targetGrid = $("#jqGridElement").jqGrid({
        datastr: tableSrc,
        jsonReader: { repeatitems: false },
        datatype: "jsonstring",
        colNames: ['title', 'subtitle'],
        colModel: [
            { name: 'title', index: 'title', width: 55 },
            { name: 'subtitle', index: 'subtitle'}],
        height: 'auto',

        gridview: true
    });

    function addItemToGrid() {
        tableSrc.rows.push({ "title": "NEW", "subtitle": "HELLO", "authors": ["1", "2", "3", "4"] });
        $("#jqGridElement").trigger('reloadGrid');
        //$("#jqGridElement").jqGrid('reloadGrid');
    }

Answer 1

First, the statement $("#jqGridElement").trigger('GridUnload') do nothing because there are no event with the name 'GridUnload'. The only event currently supported by jqGrid is 'reloadGrid'. The event support additional parameters (see here) which can be interesting for you. The call $("#jqGridElement").trigger("reloadGrid", [{current:true}]); will refresh the grid, but the selection which could make the user will be not changed.

If you need call GridUnload in "new style API" it should looks like

$("#jqGridElement").jqGrid('GridUnload');

After you call GridUnload method the table element which is basis of jqGrid will be recreated. So if you saved the $("#jqGridElement") in a variable (var gridObj = $("#jqGridElement") for example) you should refresh the value (with the assignment gridObj = $("#jqGridElement")).

Now about your main question. The method GridUnload is useful in the case if you need add new column to the grid or create on the place of old grid absolutely another grid. (see the answer or this one as an example). If you need to add one row of data to the existing grid you can use addRowData for example.

What can be really important to you to understand is the usage of ids for every row (<tr> element). If you don't want to manage ids yourself you can use undefined as the rowid in the addRowData method. In the case the $.jgrid.randId() method will be used internally to generate unique id for the new row.