jquery - jqgrid reload grid partially working

Question

I have a client side managed jqgrid that I reload when some external event are fired. Everything is fine when I reload the grid with more data but when I reload it with less data, the amount of rows is incorrect.

For instance, when the is currently 100 rows in the grid and I reload it with 200, then the nav bar shows 200 records. If there are 200 rows in it and I refresh it with 25 rows , it still show 200 in the nav bar instead of 25. The code that refreshes the grid looks like:

 $("#list2").trigger("GridUnload");             
 $.ajax({
   url: 'http://xxx,
   dataType: 'json',
   async: false,
   success: function(data) {
              gridData = data;
          }

});

    $("#list2").setGridParam({ data: gridData });
    $("#list2").trigger("reloadGrid");

I don't think the problem is with the nav bar as I can clearly hit next page and see the addition rows.

Thanks

Answer 1

Try to replace

$("#list2")[0].refreshIndex();
$("#list2").trigger("reloadGrid");

with

var g = $("#list2");
g.setGridParam({ data: gridData });
g[0].refreshIndex();
g.trigger("reloadGrid");

see http://www.trirand.com/blog/?page_id=393/help/losing-edited-cell-data-after-paging/ and http://www.trirand.com/blog/?page_id=393/bugs/data-parameter-are-not-modified-during-inline-editing/ for details.

In general you should use probably better set url parameter with respect of setGridParam methods or just use postData with a function (see How to filter the jqGrid data NOT using the built in search/filter box for details)