How to refresh jqgrid and go back to the current page using loadonce: true - jqgrid

Question

I am using the following setting which loads all the data from the server at once:
loadonce: true
Now I attempt to reload the grid after an edit:
// options for the Edit Dialog
{
closeAfterEdit: true,
closeOnEscape: true,
reloadAfterSubmit: true,
editCaption: "Edit User",
width: 1140,
height: 370,
afterSubmit: function () {
$('#jqGrid').jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid');
return [true,'']; // no error
},
errorTextFormat: function (data) {
return 'Error: ' + data.responseText
}
},
The data is refreshed from the server however, there is an issue: For example, If I edit a record in page 2, it shows page 2 on the navbar on the bottom but it always brings up the data from page 1. Any help would be appreciated. Thanks.
Update #1
I tried the following code:
var $self = $(this), p = $self.jqGrid("getGridParam");
p.datatype = "json";
$self.trigger("reloadGrid", { page: p.page, current: true });
Then I edit and click on submit, it still loads page 1 data even though the navbar stays on page 2. Then I click the forward arrow to go to page 3, then the back arrow to go to page 2 again and now it shows the page 2 data.
Update #2
Here is additional relevant code of all I am doing and still not working:
...
cmTemplate: { editable: true, editrules: { edithidden: true } },
pager: "#jqGridPager",
rowNum: 10,
rowList: [5, 10, 20, 50],
sortname: 'lastName, firstName',
sortorder: 'asc',
loadonce: true,
viewrecords: true,
gridview: true,
recreateForm: true,
width: 1140,
height: "auto",
multiselect: false,
altRows: false,
shrinkToFit: true,
scroll: false
}
});
...
$('#jqGrid').navGrid('#jqGridPager',
// the buttons to appear on the toolbar of the grid
{
edit: true,
add: true,
del: true,
search: true,
view: true,
refresh: true,
position: "left",
cloneToTop: false,
beforeRefresh: function () {
//Note: This function is only called after user clicks the refresh button
$('#jqGrid').jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid');
}
},
// Options for the Edit Dialog
{
closeAfterEdit: true,
closeOnEscape: true,
reloadAfterSubmit: false,
editCaption: "Edit User",
width: 1140,
height: 370,
afterSubmit: function () {
var $self = $(this), p = $self.jqGrid("getGridParam");
p.datatype = "json";
$self.trigger("reloadGrid", { page: p.page, current: true });
return [true, '']; // no error
},
errorTextFormat: function (data) {
return 'Error: ' + data.responseText
}
},
...
FINAL OUTCOME
I finally got the issue resolved! I switched from the not free Guriddo jqGrid to free jqGrid by Oleg and the bug was gone! I originally could not get the navigation buttons to appear on the free jqgrid but the reason they didnt appear is because I had the tag iconSet: "fontAwesome" and I did not reference that font. When I removed that tag completely, everything worked perfect. You can use that tag but you must reference the iconset url. In my case I did not need a different icon set.

Answer 1

You can use page option of reloadGrid (see the answer for the corresponding demo). You can use $(this).jqGrid("getGridParam", "page") to get page parameter, which hold the current page.
afterSubmit: function () {
var $self = $(this), p = $self.jqGrid("getGridParam");
p.datatype = "json";
$self.trigger("reloadGrid", { page: p.page, current: true });
return [true]; // no error
}
I used current: true option of reloadGrid to select the currently selected row after reloading of the grid.