Clearing jqGrid before loading new data not working?

Question

Hi there ^_^ I have the following problem:

I have a partial view with a jqGrid on it...and I use bPopup to display the partial view as a dialog.

Now there is a list of items on the side of the view. When clicking on an item...the dialog is to be displayed with the table displaying the data relating to that response...

Now the problem is that clicking on subsequent items; the data from the first item clicked is still showed...so I thought that simply calling

$("#ListDialogTable").jqGrid("clearGridData");

will clear the data and allow me to display the new data...but now when I try to show the dialog in subsequent clicks...only the table headers are shown...no data!

Any ideas and help on this appreciated :) D

P.s. some code; the method below is called by method ShowListDialog

function PopulateTable(model) {
    $("#ListDialogTable").jqGrid("clearGridData");
    $("#ListDialogTable").jqGrid({
        jsonReader:
        {
            root: "rows",
            page: "page",
            total: "total",
            records: "records",
            repeatitems: true,
            cell: "cell",
            id: "id"
        },

        colNames: model.columnN,
        colModel: model.columnM,

        datatype: "jsonstring",
        datastr: model.columnD,

        sortname: model.sortName,
        sortorder: "asc",

        autowidth: true,
        celledit: false,
        gridview: true,
        height: "auto",
        hoverrows: false,
        shrinkToFit: true,
        rowNum: 999,
        viewrecords: true
    });
}

Answer 1

You can unload the jqGrid by using below method:

jQuery("#tableId").jqGrid("clearGridData");

Answer 2

You don't posted how the element with id="ListDialogTable", which you use for the grid, are created. Will be it constructed dynamically or created once and be used many time? Moreover it is not clear whether the model.columnN and model.columnM can be changed between the calls or not. So I can only guess.

Probably you need use GridUnload method which allow you to recreate the grid including all its elements including the column headers and the pager contain. The demo from the answer demonstrate how it works.