How to clear large data from jqgrid table?

Question

The data that is coming as part of ajax call from my business class is as follows:

[{
    "user_action": "<button class='detail-icon' title='Vehicle Pass           History'onclick='javascript:openPopUpWagonList(&#39;DIM  008065&#39;);'> <img  src='/WIMS/images/icon_detail.png'></button>",
    "VEHICLE_ID": "DIM  008065",
    "setFlag": "<img src='/WIMS/images/wims-tick.gif'>",
    "clrFlag": "<img src='/WIMS/images/wims-tick.gif'>",
    "setDate": "31 Jul 2010 11:11",
    "lastClearDate": "24 Aug 2010 07:26",
    "noOfdays": "24",
    "ownerCode": "",
    "operatorCode": "",
    "maintainerCode": "",
    "severity10Pass": "~",
    "plot": "<button class='detail-icon' title='Plot' alt='Detail'onclick='javascript:popUpStepChangeListGraph(&#39;DIM  008065&#39;);'> <img src='/WIMS/images/icon_detail.png'></button>",
    "activeFlag": "1"
}, {
    "user_action": "<button class='detail-icon' title='Vehicle Pass History'onclick='javascript:openPopUpWagonList(&#39;N    005276&#39;);'> <img src='/WIMS/images/icon_detail.png'></button>",
    "VEHICLE_ID": "N    005276",
    "setFlag": "<img src='/WIMS/images/wims-tick.gif'>",
    "clrFlag": "",
    "setDate": "31 Aug 2011 10:05",
    "lastClearDate": "24 Mar 2011 10:45",
    "noOfdays": "0",
    "ownerCode": "",
    "operatorCode": "",
    "maintainerCode": "",
    "severity10Pass": "~~~",
    "plot": "<button class='detail-icon' title='Plot' alt='Detail'onclick='javascript:popUpStepChangeListGraph(&#39;N    005276&#39;);'> <img src='/WIMS/images/icon_detail.png'></button>",
    "activeFlag": "1"
}]

Here I have taken only 2 records for convenient readability, but I am displaying more than 150 records of this kind.

Now my ajax call format from my jsp page is as follows:

$.ajax({
    type: "POST",    
    url: f_reqAction, // url is set already    
    data : {maintainer:maintainerValue,show:showValue},    
    dataType:'json',    
    async: true, /* If set to non-async, browser shows page as "Loading.."*/     
    cache: false,
    timeout:80000, /* Timeout in ms */
    success: handleApplyEventResponse,
    error: handleResponseError
});

function handleApplyEventResponse(response) {
    // response is coming from my business class
    $("#stepChangeData").jqGrid('clearGridData');
    if(response.length > 0){
        for(var i=0;i<response.length;i++){
            jQuery("#stepChangeData").jqGrid('addRowData',i+1,response[i]);
        }  
        $('#stepChangeData').setGridParam({rowNum:response.length});
    }
}

When I want to remove the data by calling jQuery("#gridtabID").jqGrid('clearGridData'); a javascript error is coming prompting to stop running the script. but if the data size is small like 20 or 30 the problem does not come.

I understand populating response data by calling jqGrid('addRowData' inside for loop is not efficient when the data is this much large. but i could not find a jqgrid api which can add this response data directly in the grid without any looping.

And i could not create the buttons contained in my json data through formatter option of colModel as I found it extremely difficult to create that type of button by formatter.So I created it in my business ligic and sending it to jsp page with json data as part of the ajax respose.

So in the above context, I would have loved to have an api which could have set this json data into the grid at a shot (i.e without any looping). And I think this way this script problem could have been averted as well.

Answer 1

The best way to fill jqGrid with the JSON data from the server to use datatype: 'json' and load the data from the server. jqGrid is very flexible and one can load practically any data. One need just to use corresponding jsonReader or jsonmap property of colModel. Sometimes one need additionally use ajaxGridOptions option, serializeGridData or beforeProcessing callbacks. One should additionally use gridview: true option of jqGrid.

The difference to the usage of addRowData is huge. The main disadvantage of the usage of addRowData is that the data will be placed in the grid row per row. The problem is that if you modify an element on the page or insert a new one the position of all existing elements on the page have to be recalculated by the web browser. Because you use addRowData in the loop, then positing of the row which will be inserted first have to be recalculated also after any insertion of the next rows. So The more rows need be inserted the more slowly will be the code. Because of the problem jQuery 1.4 introduced the method jQuery.detach which allows to remove temporary an element from the page, modify it and then place it back with any standard jQuery methods like jQuery.after, jQuery.append and many other.

If you use datatype: 'json' and gridview: true the full body of grid will be constructed as string and then placed in the grid as one insert operation. So you will get much more better performance as with addRowData in case of many inserted rows.

UPDATED: On the demo I show how the loading of the data directly in jqGrid can be implemented. I recommend you to use predefined or custom jqGrid formatters. For example to be able correctly sort the data one have to include date in ISO 8601 format and use formatter: 'date' with the corresponding options to display the date.

Additionally I don't recommend you to use spaces inside of ID. I supposed that VEHICLE_ID is unique id of your data. I used it, but removed all spaces from the value.

About the usage function inside of postData I recommend you to read my old answer.

The most important part of the code of the demo you find below

var maintainerValue = 1, showValue = 200, $grid = $("#list");

$grid.jqGrid({
    url: 'DebaprasadJana.json',
    datatype: 'json',
    mtype: "POST",
    postData: {
        maintainer: function () {
            // if maintainerValue will be get from a field on the page
            // one can get the data here directly like
            //     return $("#maintainer").val();
            return maintainerValue;
        },
        show: function () {
            return showValue;
        }
    },
    loadonce: true,
    gridview: true,
    jsonReader: {
        repeatitems: false,
        id: function (obj) {
            // we can use VEHICLE_ID as the rowid, but cut spaces
            return obj.VEHICLE_ID.replace(/\s/g, '');
        },
        root: function (obj) { return obj; },
        page: function (obj) { return 1; },
        total: function (obj) { return 1; },
        records: function (obj) { return obj.length; }
    }
});
$("#reload").click(function () {
    // next two lines simulate reading of the
    // current values of maintainerValue and showValue 
    maintainerValue++;
    showValue--;
    // we need reset datatype only if we use loadonce:true
    $grid.jqGrid('setGridParam', {datatype: 'json'})
        .trigger('reloadGrid');
});