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

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.