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

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

• javascript
• jquery
• jqgrid

• Can you post some HTML and javascript code? It is more helpful for us to help you – Reporter Commented May 6, 2011 at 9:28
• code added ^_^ sorry formatting did not include first and last line of code... – Dieter Commented May 6, 2011 at 9:34
• This code is executed each time the dialog needs to be shown...so i dont know if executing it over and over has a bad effect or not... – Dieter Commented May 6, 2011 at 9:53
• To format the code fragment you select your code and click on "{}" element in the toolbar. It do not much more as insert 4 blanks at the beginning of every line and insert empty row before and sometime after the selected text. If you insert the blanks manually you will have the same results. – Oleg Commented May 6, 2011 at 11:20

4 Answers 4

You can unload the jqGrid by using below method:

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

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.

You can use jqgrid's GridUnload method

$("#tableId").jqGrid("GridUnload")

This will unload the entire grid and will allow you to load new data onto the grid.

I have same issues because i am using older version of jqGrid and this is my solution for this:

jQuery("#grid").clearGridData(true).trigger("reloadGrid");