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

Solution 1

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.

Solution 2

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.

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

Comments

[gawpertron]

as mentioned using GridUnload() before using jqGrid() didn't work and when tried a second type it throws TypeError: d.emptyRows is null in jquery

[Oleg]

@gawpertron: I suppose that you use it in a wrong way. You can verify that the demo from the referenced answer do work without any problems in jqGrid 4.4.2 or 4.4.4. I suppose that you do'n reassign value of grid after usage of GridUnload like I described in my answer. If you have problems you should append your question with the current code which you use.

[gawpertron]

yes your answer will work in most cases. but I have a special case where I need to keep the reference to the original table element intact

[Oleg]

@gawpertron: I don't understand the reason why you need to have the same DOM element of <table>. The only reason could be that you hold the reference to the element in a variable. So like I wrote you should just assign to the variable new value. The problem that jqGrid build dynamically a lot of other DOM elements inside the <table> and many divs over it. <table> only 1) defines the place of grid and the name of id used as prefix/suffix in other elements of grid. Why it could be needed to hold unchanged exactly the <table> if all other elements over the <table> will be changed?

[Arjun Patil]

#JS var grid = $('#jqGrid'); if(grid[0].grid == undefined) { grid.jqGrid(options); } else { grid.empty(); delete grid[0].grid; $('#gbox_jqGrid').replaceWith(grid); grid.jqGrid(options); } #HTML <table id="jqGrid"></table>