Question

I’m using jqGrid’s filterToolbar method to let users quick search/filter the grid data. I’m using loadonce: true and datatype: local as my grid configs. I have a drop-down (select) filter type for one of my columns, which works fine.

Problem is when i try to update a row (using setRowData) that is not visible (because the filter/search result is hiding them), the row doesn’t get updated when I reshow them by clearing the filter.

Any suggestions? I’ve tried triggering the reloadGrid event too, no luck.

Cheers

Update 1 – Reproducing the problem:

Here’s how to reproduce the problem, using jqGrid’s official demos:

Step 1

Browse to the jqGrid’s demo page, and open the demo named ‘Toolbar search’ under ‘New in version 3.7’

Step 2

In the demo grid, filter by the code column with the value 575878 so that only the first row is shown on the grid.

Step 3

Bring up the javascript console and update a row that’s not currently visible, in this example update row 2:
jQuery("#toolbar").jqGrid('setRowData',2,{item_id:2,item:'blargh',item_cd:12345678});

Step 4

Unhide all the rows by clearing the filter value, and see that row 2 has not been updated!

Anything I’m doing wrong here? Possible workarounds?

Answer 1

You misunderstand how the grid are build. Grid can contain hidden columns, but no hidden rows. If one filter grid the full grid body will be removed and only the filtered rows will be inserted.

The method setRowData can be used to modify any row of the grid, but you can’t modify something which is not present in the grid.

If you use local grid (datatype: 'local') then the data which you save in the grid will be saved in two internal jqGrid parameters data and _index. So you should modify the data object. To fill grid with modified data you need call .trigger("reloadGrid").

So if you want modify columns item_id, item and item_cd of the grid’s data for the rowid=2 you can do the following steps.

1) Get references to the internal jqGrid parameters data and _index:

var $myGrid = jQuery("#toolbar"),
    data = $myGrid.jqGrid('getGridParam', 'data'),
    index = $myGrid.jqGrid('getGridParam', '_index');

2) Get reference to the object which represent the rowid which you need:

var rowId = '2',
    itemIndex = index[rowId],
    rowItem = data[itemIndex];

3) Modify the data item like you as need:

rowItem.item_id = 2;
rowItem.item = 'blargh';
rowItem.item_cd = 12345678;

4) Refresh grid contain (if needed) by reloading the grid

$myGrid.trigger('reloadGrid');