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.

Wayworn

Answer 1

You can use simple:

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

Brocket

I had to call clearGridData() before this, for it to work. example jQuery("#list")/clearGridData(); – Shot

Answer 2

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}]);
}

Rinee

in addition if need to prevent page changing (if possible) for new data (so user will stay on the same page after reload) something like this should be used code var prevPage = $grid.jqGrid("getGridParam", 'page'); var rowNum = parseInt($grid.jqGrid("getGridParam", 'rowNum'), 10); var lastPage = Math.ceil(newData.length / rowNum); $grid.jqGrid('clearGridData') .jqGrid('setGridParam', { data: newData }) .jqGrid('setGridParam', { lastpage: lastPage }) .trigger('reloadGrid', [{ page: prevPage}]); – Garibull

Answer 3

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').

Tema

Yep I've tried GridUnload, No dice. The grid unloads and never comes back. – Wayworn

Is it possible that your 'results' came via an ajax request, and when you 'unload' and reload your jqGrid, the results aren't loaded yet? So the grid will be empty? (that's the only thing i can imagine that can be wrong) – Tema

Answer 4

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

Cattier

Answer 5

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.

Slug

Answer 6

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");

Secern