jqGrid Refreshing Local Data (JSON Object)

Question

I'm trying to use jqGrid with local data and I'm finding a couple of issues:

I'm initializing the thing like so:

function refreshGrid($grid, results)
{
    $grid.jqGrid({
  data: results,
        datatype: "local",
        colNames:['#','File', 'Category', 'Line Number', 'Message Text','Detailed'],
        colModel:[
            {name:'count',index:'count', width:100, resizable: true},
            {name:'basename',index:'basename', width:100, resizable: true, classes:['basename']},
            {name:'category',index:'category', width:60, resizable: true},
            {name:'linenumber',index:'linenumber', width:60, resizable: true},
            {name:'text',index:'text',width:400, resizable: true},
            {name:'detailed',index:'detailed',width:100,classes:['detailed'], resizable: true }
            ],
        viewrecords: true,
     rowNum:100,
     rowList:[100,200],
     pager: '#debug_errors_pager',
     caption:"JSON Example"
 });
}

The data I'm passing in, results is an array of objects.

Issues:

1) The pager is totally off. It shows the correct count, but it doesn't actually let me page through the data.

2) I can't refresh the data. I'm using my own search function to arrive at my results. I can't figure out how to update the existing data. The grid initializes the first time. On subsequent attempts, it initializes to an empty table.

3) I've tried things like:

$grid.empty() - Doesn't work because the $grid object is decorated by jqgrid. I'm trying to "nuke" the old grid and simply re-render it as a workaround. `$grid.trigger('reloadGrid') - Doesn't work, don't know why.

Note: this is using jQGrid 3.7.

Answer 1

If you are using Local data, you should mention your Local json Data in jqGrid's setGridParam property

 jQuery("#list")
        .jqGrid('setGridParam', {
        datatype: 'local',
        data:results //json object
    });

To reload the jqgrid you can use the following.

 jQuery("#list").trigger("reloadGrid");

Answer 2

Following works for me when refreshing data on an existing grid:

var gridData = [...];

var grid = jQuery('#gridId');
grid.jqGrid('clearGridData');
if( grid.get(0).p.treeGrid ) {
    grid.get(0).addJSONData({
        total: 1,
        page: 1,
        records: gridData.length,
        rows: gridData
    });
}
else {
    grid.jqGrid('setGridParam', {
        datatype: 'local',
        data: gridData,
        rowNum: gridData.length
    });
}
grid.trigger('reloadGrid');

I had to do it this way because reloadGrid() calls populate(), populate() calls addLocalData() and passes the return value to addJSONData(), but for treeGrid == true, addLocalData() returns nothing, and addJSONData() subsequently does nothing.

Answer 3

I haven't found a good documented way to update jqGrid's local data, here is how I extended jqGrid to solve my problem:

$.extend($.fn.jqGrid, { setData: function(data) {
    this[0].p.data = data;
    return true;
} } );

After this you can do the following to update jqGrid with new data:

suppose your grid was declared like this:

    jQuery("#list").jqGrid({ datatype: "local", ... other params ... });

then you can do:

jQuery("#list").jqGrid('setData', array_with_new_data);
jQuery("#list").trigger("reloadGrid");

P.S. see the link on how to fetch all data from the grid Retrieving contents of the grid

Answer 4

question 1:

If we have defined a pager for grid with client side data, the buttons in pager are automatically disabled. In other words, the current release of grid does not support client side paging and searching.

local data

Question 2: Have you tried:

 $("#list").GridUnload();

see here for the differences between gridUnload() and trigger('reloadGrid').

Answer 5

I was able to achieve something similar. The trick for my issue was to clear out the data before updating the data grid parameter. Assuming your grid is initialized elsewhere (with datatype: 'local'), try:

function refreshGrid($grid, results) {
    $grid.jqGrid('clearGridData')
        .jqGrid('setGridParam', { data: results })
        .trigger('reloadGrid', [{ page: 1}]);
}

Answer 6

You can use simple:

jQuery("#list")
    .jqGrid('setGridParam',
        { 
            datatype: 'local',
            data:mydata
        })
    .trigger("reloadGrid");