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.

score 32 · Answer 1 · edited Jan 05 '12 at 13:04

32

You can use simple:

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

edited Jan 05 '12 at 13:04

Kees C. Bakker

32,294
27
115
203

answered Mar 11 '11 at 07:01

Ved

321
3
2

1

I had to call clearGridData() before this, for it to work. example jQuery("#list")/clearGridData(); – Muneeb Mirza Jun 05 '20 at 07:45

score 26 · Answer 2 · answered Sep 26 '11 at 21:51

26

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

answered Sep 26 '11 at 21:51

Megan

2,534
1
17
15

2

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}]);` – Yauhen.F Dec 07 '11 at 14:52

score 7 · Answer 3 · edited Jul 26 '16 at 04:12

7

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

edited Jul 26 '16 at 04:12

David Gardiner

16,892
20
80
117

answered Jun 10 '10 at 14:12

bruno

1,830
2
22
36

2

Yep I've tried GridUnload, No dice. The grid unloads and never comes back. – Koobz Jun 13 '10 at 18:15
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) – bruno Jun 14 '10 at 06:28

score 6 · Answer 4 · edited May 23 '17 at 11:46

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

zishan · Answer 5 · 2011-04-15T16:57:09.927

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.

score 0 · Answer 6 · answered Jul 10 '18 at 04:03

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

jqGrid Refreshing Local Data (JSON Object)

6 Answers6

Linked