jqGrid reloadGrid and refresh new colModel and colNames

Question

I'm trying to reload a jqGrid with new rows, colNames and colModel. The row data seems to load fine but the columns don't seem to be refreshed. I've tried using GridUnload and GridDestroy but I end up losing the jQuery DOM instance entirely and no longer loads any data as well.

var grid = $('#my-grid');

if(grid[0].grid == undefined) {
    grid.jqGrid(options);
} else {
    grid.setGridParam(options);
    grid.trigger('reloadGrid');
}

The grid instance is important because it will be passed to other objects as a param. These objects may attach listeners or trigger events.

I'm using version 4.4.2

Answer 1

reloadGrid reload only the body of the grid and not changes the column headers which will be created when the grid was created.

If you need to change number of columns or to use colNames and colModel on place of old grid you have or recreate grid. You can use GridUnload method first and then create new grid (call grid.jqGrid(data) in your case). It's important that if you cached jQuery selector to grid in a variable like grid in your code you have to assign grid one more time after call of GridUnload, so you should do something like grid = $("#grid"); directly after call of GridUnload.

See the answer for more details and the code example.

Answer 2

It seems that jqGrid removes the initial <table></table> from the DOM and replaces it or forgets the reference (I haven't looked that hard into it).

So you have to reselect the new table everytime you want to create a new grid ie. $('table#my-grid'). This makes it tricky if you want to pass a reference of the grid's table about to other parts of your app as a parameter.

My work around involves deleting the grid reference and replacing the grid's wrapped div with the original table. then creating a jqGrid in the normal way with the new colModel and colNames.

grid.empty();
delete grid[0].grid;
$('#gbox_my-grid').replaceWith(grid);
grid.jqGrid(options);

It isn't the tidiest of solutions but it does allow me to keep a permanent reference to the original <table>. I'm uncertain how other jqGrid plugins will be affect by this though.

Edit

it turns out jQuery DataTables is better suited for customisation and we have adopted this instead of using jqGrid.

Answer 3

I have combined both answers and made some modification in order to have it to work.

var grid = $('#tableID');

if(grid[0].grid == undefined) {
  grid.jqGrid(options);
} else {
  delete grid;
  $('#tableID').GridUnload('#tableID');
  $('#tableID').jqGrid(options);
}