jquery - reload a loaded jqGrid with a different table data

Question

I have a page that displays a table in two different modes. In each mode I have a different set of columns. I'm using jqGrid to display the table. When I try to load the table for the second time (with same or different columns for that matter) the table will not refresh the data.

Is there a different API to reload data? Or should I use some method to clear the table first?

Answer 1

I ran into this same problem today. I use jqGrid to display search results from parameters specified in one or more form fields. I've got a click event on the search button and a keydown event on the fields themselves to capture the return key. Both events call a function that serializes the form and creates the initial jqGrid.

In the initial grid I have the option to call the function reloadEvents when the gridCompletes:

gridComplete: reloadEvents

In the reloadEvents function I have:

$("#frmSearch").bind("keydown", function(e) {
    if (e.keyCode == 13) {
        $('#searchList').setGridParam({url:'/model/actSearch.cfm?'+$('#frmSearch').serialize()});
        $('#searchList').trigger("reloadGrid");
    }
});

$('#btnSearch').click(function(){
    $('#searchList').setGridParam({url:'/model/actSearch.cfm?'+$('#frmSearch').serialize()}); 
    $('#searchList').trigger("reloadGrid");  
}); 

If you're loading your data in your grid a different way you can use setGridParam to change whatever you need. The reloadGrid method is what should refresh your data based on the params you change.