Question

Current requirement is on button click I am getting a json data through ajax which contains information about a table header and ,data.
I want to show the table data using jqgrid,so for that I am preparing jqgrid by using following code:

$("#fixedId").jqGrid({ 
        datatype: 'clientSide',
        colNames:colName,//from json response
        colModel :colModels,//from json response
                   pager: '',
                   shrinkToFit:true,
                   autowidth:true,
                   rowNum:10,
                   rowList:[10,20,30],
                   emptyrecords: "Empty records",
                   viewrecords: true,
                   width: '100%',
                   height: '100%',
                   altRows:true,
                   scrollOffset: 0,
                   gridview: true,
                   rownumbers:false,
                   multiselect:false,
                   multiboxonly:false,
                   caption: ''         
    }); 

    $("#"+tableId).jqGrid('gridResize', { minWidth: 450, minHeight: 200 });

I am adding data to this newly created table using jqgrid addRowData function.

So things are working fine for first time.
Now when I get a new json response to paint this new table details via ajax ,I have to delete the old table,
so to delete the old table data I tried

1) $("#fixedId").remove();
recreated table tag using..

$("#tableParent").append('<table id=fixedId><tr><td /></tr></table>');

and then re call previous code to create this fresh table with new header and data ,but this new header,data table is not getting painted on screen.The screen remains empty and i couldnot see any table on screen.

2) I tried

$("#gbox_fixedId").remove();

repeated step 1 to generate new table and add data..again same result..I could not see any table on screen.

3) I tried

$("#gbox_fixedId").find(".ui-jqgrid-htable").remove();

This option is working but after 3-4 times repainting new tables I could see each table which is painted looks bit distorted and after some more repaint it become hard to use the table.

Any solution as how can I delete the old jqgrid and create fresh/clean jqgrid so that it works smooth?

Answer 1

Before calling $("#fixedId").jqGrid(); I assume you have this structure:

<div id="tableParent">
    <table id="fixedId"></table>
</div>

Then, if you inspect your dom after calling jqGrid, you will notice that fixedId is no longer direct child of tableParent because jqGrid warp it into other elements, so to delete your grid, you will need to call:

$("#tableParent").empty();