how to reset jqgrid after refreshing its data

Question

I'm refreshing jqgrid with this script:

$('#btnRefresh').click(function () {
   $.ajax({
      type : "GET",
      url: "${pageContext.request.contextPath}/General/ProvinceLoadGrid.json",
      success: function (data) {
           if (data != null) {
               jQuery('#dataTable').jqGrid('clearGridData')
                     .jqGrid('setGridParam', {data: data, page: 1})
                     .trigger('reloadGrid');
           }
      }
   });
)};

I have configured jqgrid to save selected rows after moving through pages. this script triggers reload grid to reload data, but this produces a problem. the problem is when I select first row in the page 1, (when each page has 10 records) the first record on the second page (11th record) is selected too. also the record on the 3rd page is selected too (21st record) etc ... all of this happens after reloadGrid. the jqgrid is saving my selection on each page correctly, but after reload grid this problem occurs.

How can I manage to solve this?

Answer 1

I fixed it ! the problem is after reload grid the datatype resets to its default value and we need to set it back to json or xml again!

$('#btnRefresh').click(function () {
   $.ajax({
      type : "GET",
      url: "${pageContext.request.contextPath}/General/ProvinceLoadGrid.json",
      success: function (data) {
           if (data != null) {
               jQuery('#dataTable').jqGrid('clearGridData')
                     .jqGrid('setGridParam', {data: data, datatype: 'json'})
                     .trigger('reloadGrid');
           }
      }
   });
)};

Answer 2

Try this:

if (data != null) {
 jQuery('#dataTable').jqGrid('clearGridData')
 jQuery('#dataTable').jqGrid('setGridParam', {data: data, page: 1})
 jQuery('#dataTable').trigger('reloadGrid');
}

Answer 3

To avoid all problems,I do this

Html - enclose jQgrid table in a div

<div id="tableDivID">
  <table id="tableID"></table>
  <div id="tablePagerID"></div>
</div>

Jquery - Function for activating jQgrid

function activatejQGrid(data)
{

$("tableID").jQGrid({
//code for jQgrid initilise with *data*
}}

}

re-initialise jQgrid

$("#tableDivID").replaceWith(function () {
  return "<div id='tableDivID'><table id='tableID'></table><div id='tablePagerID'></div>
</div>";
  });
activatejQGrid(data);