jQGrid reload grid after save inline button click

Question

I was looking here to find out how to reload grid after save row:

http://www.trirand.com/jqgridwiki/doku.php?id=wiki:inline_editing

JQGrid setRowData After inline edit

The afterInsertRow : function(ids) method is not executing when I use gridview:true

So i come up with this solution:

 onSelectRow: function (id) {
                    var tr;
                    if (id && id !== lastSel) {
                        if (typeof lastSel !== "undefined") {
                            grid.jqGrid('restoreRow', lastSel); 

                            //this line doing the reload
                            grid.jqGrid('saveRow', id, true, '', '', '', '', reloadGrid());
                            tr = grid[0].rows.namedItem(lastSel);

                            $("div.ui-inline-edit", tr).show();
                            $("div.ui-inline-save, div.ui-inline-cancel", tr).hide();
                        }
                        lastSel = id;
                    }

                },

I am using Actions formatter

     { name: 'act', index: 'act', width: 60, align: 'center', sortable: false, formatter: 'actions',
                                formatoptions: {
                                    keys: true, // we want use [Enter] key to save the row and [Esc] to cancel editing.
                                    delOptions: myDelOptions,
                                    afterSave: hideDelIcon,
                                    afterRestore: hideDelIcon
                                }
                            }

Grid properties

rowNum: 10000,
                gridview: true,
                rownumbers: true,
                ignoreCase: true,
                viewrecords: true,
                sortorder: "desc",
                height: "100%",
                editurl: '/Admin/Edit/',
                grouping: true,
                groupingView: {
                    groupField: ['race'],
                    groupColumnShow: [false],
                    groupText: ['<b class="selection-race">{0}</b>'],
                    groupDataSorted: true
                },
                ondblClickRow: function (id, ri, ci) {
                    var tr;
                    // edit the row and save it on press "enter" key
                    grid.jqGrid('editRow', id, true, null, null);
                    tr = grid[0].rows.namedItem(lastSel);
                    //$("div.ui-inline-edit, div.ui-inline-del", tr).hide();
                    $("div.ui-inline-edit", tr).hide();
                    $("div.ui-inline-save, div.ui-inline-cancel", tr).show();                    
                },
                onSelectRow: function (id) {
                    var tr;
                    if (id && id !== lastSel) {
                        // cancel editing of the previous selected row if it was in editing state.
                        // jqGrid hold intern savedRow array inside of jqGrid object,
                        // so it is safe to call restoreRow method with any id parameter
                        // if jqGrid not in editing state
                        if (typeof lastSel !== "undefined") {
                            grid.jqGrid('restoreRow', lastSel); 

                            grid.jqGrid('saveRow', id, true, '', '', '', '', reloadGrid());
                            tr = grid[0].rows.namedItem(lastSel);
                            //$("div.ui-inline-edit, div.ui-inline-del", tr).show();
                            $("div.ui-inline-edit", tr).show();
                            $("div.ui-inline-save, div.ui-inline-cancel", tr).hide();
                        }
                        lastSel = id;
                    }

                },
                loadComplete: function () {

                    $(this).find("div.ui-inline-del").hide();

                    var ids = jQuery("#Grid1").getDataIDs();

                    for (var i = 0; i < ids.length; i++) {
                        var cl = ids[i];
                        $("tr#" + $.jgrid.jqID(cl)).prev().children().find("span.ui-icon-circlesmall-minus").hide();                        
                    }

                    var mids = jQuery("#Grid1").getDataIDs();

                    for (var i = 0; i < mids.length; i = i + 1) {
                        var cl2 = jQuery.jgrid.jqID(mids[i]);
                        var rowData = $("#Grid1").getRowData(cl2);

                        if (rowData.isonline == 'false') {
                            var trElement = jQuery("#" + cl2, jQuery('#sGrid1'));
                            trElement.removeClass('ui-widget-content');
                            trElement.addClass('not-approved');
                        }
                    }

                    $(".rowCount").text($("#Grid1").getGridParam("reccount"))   
                },

                beforeRequest: function () {                    
                    $('#Grid1').setGridWidth(903, true);
                }
            }).jqGrid('navGrid', '#Pager1', { add: false, edit: false, del: false }, {}, {}, myDelOptions, { multipleSearch: true, overlay: false });

Predefined functions

var lastSel, rowdata,
                grid = $("#Grid1"),
                getColumnIndexByName = function (grid, columnName) {
                    var cm = grid.jqGrid('getGridParam', 'colModel'), i = 0, l = cm.length;
                    for (; i < l; i += 1) {
                        if (cm[i].name === columnName) {
                            return i; // return the index
                        }
                    }
                    return -1;
                },
                myDelOptions = {
                    processing: false,
                    mtype: "POST", reloadAfterSubmit: true, //delData: { name: rowdata.name, isgood: rowdata.isgood }
                    serializeDelData: function (postdata) {
                        //var rowdata = jQuery('#Grid1').getRowData(postdata.id);
                        // append postdata with any information 
                        return { id: postdata.id, uploadinfoid: postdata.uploadinfoid, oper: postdata.oper, name: rowdata.name, isfast: rowdata.isfast, isgood: rowdata.isgood, isdead: rowdata.isdead, isslow: rowdata.isslow, isheavy: rowdata.isheavy, isonline: rowdata.isonline };
                    },
                    // because I use "local" data I don't want to send the changes to the server
                    // so I use "processing:true" setting and delete the row manually in onclickSubmit
                    onclickSubmit: function (rp_ge, rowid) {
                        rowdata = jQuery('#Grid1').getRowData(rowid);
                        // we can use onclickSubmit function as "onclick" on "Delete" button
                        // delete row
                        grid.delRowData(rowid);
                        $("#delmod" + grid[0].id).hide();

                        if (grid[0].p.lastpage > 1) {
                            // reload grid to make the row from the next page visable.
                            // TODO: deleting the last row from the last page which number is higher as 1
                            grid.trigger("reloadGrid", [{ page: grid[0].p.page}]);
                        }

                        return true;
                    }
                },

                hideDelIcon = function (rowid) {
                    setTimeout(function () {
                        $("tr#" + $.jgrid.jqID(rowid) + " div.ui-inline-del").hide();
                    }, 50);
                },

                reloadGrid = function (rowid, result) {

                    $("#Grid1").trigger("reloadGrid");
                };

It is working but the problem is, grid getting reloaded every time after row clicked but not after save button clicked. It is not right behavior because there is no reason to process unreasonable server request and reload grid on each row click.

How may i change that behavior? I want to reload grid only on save button click.

Answer 1

It seems to me, that you should just include $("#Grid1").trigger("reloadGrid"); or $("#Grid1").trigger("reloadGrid",[{current:true}]); in the hideDelIcon function:

hideDelIcon = function (rowid) {
    setTimeout(function () {
        $("tr#" + $.jgrid.jqID(rowid) + " div.ui-inline-del").hide();
        // the next line should be added
        $("#Grid1").trigger("reloadGrid",[{current:true}]);
    }, 50);
}