Reload jqGrid on save/submit

Question

I have the following code to enter inline editing on double click:

ondblClickRow: function (row_id) {
            if(row_id != null) {
                    $('#Products').jqGrid('restoreRow',last_selected_row);
                    $('#Products').jqGrid('saveRow',row_id);
                    $("#Products").jqGrid('editRow',row_id, true, null, 
                        function(){ $("#Products").trigger("reloadGrid", [{current: true}]); }, 
                        'xtras/Products.php', 
                        null,{},
                        {},{}
                    );
                    $("#Products_ilsave").removeClass('ui-state-disabled');
                    $("#Products_ilcancel").removeClass('ui-state-disabled');
                    $("#Products_ilcancel").removeClass('ui-state-disabled');
                    $("#Products_ilcopy").addClass('ui-state-disabled');
                    $("#Products_iladd").addClass('ui-state-disabled');
            } 
        }

and navigation definition:

$("#Products").jqGrid("navGrid", "#Products_pager",
            {search: true, add: false, edit: false, del: true, refreshstate: "current"},
            {},
            {},
            {},
            {},
            {sopt:['eq','ne','cn','bw','bn','ge','le','lt','gt'], multipleSearch:true, showQuery: false}
        )
    .jqGrid("inlineNav", "#Products_pager",
        {add: true, edit: true},
    )
    .navButtonAdd('#Products_pager',{
        caption:"", 
        title:"Copy selected row",
        id:"Products_ilcopy", 
        buttonicon:"ui-icon-copy", 
        onClickButton: function(){
            var srcrowid = $grid.jqGrid('getGridParam', 'selrow');

            if (srcrowid > 0) {
                $('#Products_iladd').click();
                var rowData = $('#Products').jqGrid('getRowData', srcrowid);
                rowData.ID = '';
                rowData.Catalogue = '';
                rowData.UPCEAN = '';
                rowData.copyID = srcrowid;
                $grid.jqGrid('setRowData', 'new_row', rowData);
                var ondblClickRowHandler = $('#Products').jqGrid("getGridParam", "ondblClickRow");
                ondblClickRowHandler.call($("#Products")[0], 'new_row');
            } else {
                alert('Please select a row to copy');
                return false;
            }
        }, 
        position:"last"
    });

As you can see when I click on COPY button a new row created and ondblClickRow is called to enter inline editing. If I click on SAVE button in navGrid - it saves but not reloads. If I hit Enter key - it reloads, but doesn't save anything.

How can I save and reload grid after please?

--------------UPDATE---------------------

add, edit, delete, copy - all the same URL - 'xtras/Products.php'

url:'xtras/Products.php',
editurl:'xtras/Products.php',
datatype: "json",
mtype:'GET',

$('#Products') - is the only grid on the page

using - jqGrid 4.4.2

Answer 1

The main problems in your current code is the following: you specify callback with reloadGrid only for one direct call of editRow. On the other side you use inlineNav which have two other calls of editRow: one on click on Edit button and another on click on Add button. You will have no reloading of the grid in the case. There are some other problems in the implementation of "Copy selected row" button. So I decide to rewrite the code which you use. The resulting code could looks like below

var editOptions = {
        keys: true,
        aftersavefunc: function() {
            var $self = $(this);
            setTimeout(function () {
                $self.trigger("reloadGrid", [{current: true}]);
            }, 50);
        },
        url: "xtras/Products.php"
    },
    gridIdSelector = "#Products",
    pagerIdSelector = "#Products_pager",
    $grid = $(gridIdSelector);

$.extend($.jgrid.search, {
    sopt: ["eq", "ne", "cn", "bw", "bn", "ge", "le", "lt", "gt"],
    multipleSearch: true
});

// create the grid
$grid.jqGrid({
    ...
    pager: pagerIdSelector,
    ondblClickRow: function (rowid) {
        var $self = $(this),
            savedRows = $self.jqGrid("getGridParam", "savedRow");

        if (savedRows.length > 0 && savedRows[0].id !== rowid) {
            // cancel editing of another row is editing
            // don't cancel on double click on the current editing
            $self.jqGrid("restoreRow", savedRows[0].id);
        }
        if (savedRows.length === 0) {
            $self.jqGrid("editRow", rowid, editOptions);
        }
    }
})
.jqGrid("navGrid", pagerIdSelector, {add: false, edit: false, refreshstate: "current"})
.jqGrid("inlineNav", pagerIdSelector, { editParams: editOptions, addParams: {addRowParams: editOptions}})
.jqGrid("navButtonAdd", pagerIdSelector, {
    caption: "",
    title: "Copy selected row",
    id: $grid[0].id + "_ilcopy", 
    buttonicon: "ui-icon-copy",
    onClickButton: function () {
        var $self = $(this), p = $self.jqGrid("getGridParam"), rowData,
            srcrowid = p.selrow, savedRows = p.savedRow;

        if (srcrowid !== null) {
            if (savedRows.length > 0) {
                // cancel editing
                $self.jqGrid("restoreRow", savedRows[0].id);
            }
            rowData = $self.jqGrid("getRowData", srcrowid);
            rowData.ID = "";
            rowData.Catalogue = "";
            rowData.UPCEAN = "";
            rowData.copyID = srcrowid;
            $self.jqGrid("addRow", {
                initdata: rowData,
                addRowParams: editOptions 
            });
        } else {
            alert("Please select a row to copy");
            return false;
        }
    }
});

// Enable/disable buttons on start/end of editing
$grid.bind("jqGridInlineEditRow jqGridInlineAfterSaveRow jqGridInlineAfterRestoreRow", function () {
    var $self = $(this),
        savedRows = $self.jqGrid("getGridParam", "savedRow");
    if (savedRows.length > 0) {
        // some row is editing now
        $(gridIdSelector + "_ilsave," + gridIdSelector + "_ilcancel").removeClass("ui-state-disabled");
        $(gridIdSelector + "_ilcopy," + gridIdSelector + "_iladd," + gridIdSelector + "_iledit").addClass("ui-state-disabled");
    } else {
        // No row is editing now
        $(gridIdSelector + "_ilsave," + gridIdSelector + "_ilcancel").addClass("ui-state-disabled");
        $(gridIdSelector + "_ilcopy," + gridIdSelector + "_iladd," + gridIdSelector + "_iledit").removeClass("ui-state-disabled");
    }
});

You can see that I defines one object editOptions which I use later as the options of editRow for all cases. Additionally I use savedRow parameter of jqGrid which hold the information about currently editing (with respect of inline or cell editing) rows. If savedRow is empty array, then no rows are editing now. If it's not empty then the id property of the items of the array contains the rowid of editing row. I use additionally direct call of addRow method inside of onClick handler of "Copy selected row" button.