Reload jqGrid on save / submit

Question

I have the following code to enter inline editing with a 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 press the COPY button, a new line is called and ondblClickRow to introduce inline editing. If I press the SAVE button in navGrid , it will save, but not restart. If I press Enter, it will reboot, but will not save anything.

How can I save and reload the grid, 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') - the only grid on the page

using - jqGrid 4.4.2

Answer 1

The main problems in your current code are: you specify a callback with reloadGrid for only one direct call to editRow . On the other hand, you are using inlineNav , which has two other calls to editRow : one clicks the Edit button and the other clicks the Add button. You will not have a grid reload in the enclosure. There are other problems when implementing the Copy Selected Row button. So I decided to rewrite the code you are using. The resulting code may look 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 am defining one editOptions object, which I use later as editRow options for all cases. In addition, I use the savedRow jqGrid parameter, which contains information about the ones currently being edited (relative to the rows or editing the cell). If savedRow is an empty array, now the lines are not edited. If it is not empty, the id property of the array elements contains the rowid of the edit line. I use an additional direct call to the addRow method inside the onClick handler of the Copy Selected Row button.