javascript - jqGrid Taking Long Time For Large Records

Question

I am using jgGrid. Its working perfectly but when i pass about 90,000 records and open the page in google chrome it takes around 8 sec to create a grid which in my case it should be near 3-4 sec. and moreover when i run the same page on IE it became unresponsive.

Any suggestion how can i reduce the time ?

my script

function GetCommodityGrid(array) {
 array = array.rows; // assign rows array to array object
totalRows = array.length;
    jQuery(document).ready(function () {
        jQuery("#list").jqGrid({
            datatype: 'local',
            data: array,
            colNames: ['COM_NAME', 'COM_CODE', 'DELV_UNITS', 'LOT_SIZE', 'TICK_SIZE', 'TICK_VALUE'],
            colModel: [
        { name: 'COM_NAME', index: 'COM_NAME', width: 90, editable: true },
        { name: 'COM_CODE', index: 'COM_CODE', width: 100, editable: true },
        { name: 'DELV_UNITS', index: 'DELV_UNITS', width: 80, align: "right", editable: true },
        { name: 'LOT_SIZE', index: 'LOT_SIZE', width: 80, align: "right", editable: true },
        { name: 'TICK_SIZE', index: 'TICK_SIZE', width: 80, align: "right", editable: true },
        { name: 'TICK_VALUE', index: 'TICK_VALUE', width: 150, sortable: false, editable: true }
    ],

            rowList: [50,100,200],
            rownumbers: true, // show the numbers on rows
            loadonce: true,
            pager: '#pager',
            sortname: 'COM_NAME',
            viewrecords: true, // show the total records on the end of the page
            editurl: "TestGrid/EditRecord",
            caption: "JSON Example",

            //new option

           gridview: true,
           autoencode: true,

        });


        $("#list").jqGrid("navGrid", "#pager", { add: false },
    { //the Edit options
        closeAfterEdit: true,
        afterSubmit: function (response) {
            // you should return from server OK in sucess, any other message on error
            alert("after Submit");
            if (response.responseText == "OKK") {
                alert("Update is succefully")
                return [true, "", ""]
            }
            else {
                alert("Update failed")
                $("#cData").click();
                return [false, "", ""]
            }
        }
    });



    });
}

Answer 1

I analysed process of loading local grid with 90,000 unsorted rows and have found very funny bottleneck which one can easy overcome. First of all here is the demo which works quickly and here is almost the same demo which works much slowly especially in IE.

The most time of loading jqGrid get the line of jqGrid code directly at the beggining:

var p = $.extend(true,{
    // there are here different default values of jqGrid parameters
}, $.jgrid.defaults, pin || {});

Because one uses true as the first parameter then jQuery makes full copy of the data and it works slowly (why? It's another pure jQuery question).

As a workaround I suggest to set no data parameter during creating the grid. In the case the default parameter data: [] will be used. Instead of that one can set data inside of onInitGrid callback:

$("#list").jqGrid({
    //data: gridData,
    datatype: "local",
    ....
    onInitGrid: function () {
        // get reference to parameters
        var p = $(this).jqGrid("getGridParam");

        // set data parameter
        p.data = gridData;
    }
});

As the result the performance of loading of the grid will become much better.

I will post later my suggestions to trirand how to make small change of the code of jqGrid to improve the performance of jqGrid in the case. What I suggest is very simple. One can save data parameter in a variable, then call var p = $.extend(true,{...}); and then set data parameter directly in p variable

    // save local data array in temporary variable and remove from input parameters
    // to improve performance
    var localData;
    if (pin != null && pin.data !== undefined) {
        localData = pin.data;
        pin.data = [];
    }
    var p = $.extend(true,{
        // there are here different default values of jqGrid parameters
    }, $.jgrid.defaults, pin || {});
    if (localData !== undefined) {
        p.data = localData;
    }

The demo uses the fixed code of jqGrid and it works quickly.

UPDATED: The pull request which I posted to trirand is already merged to the main code of jqGrid on github (see more in the bug report). So the next version of jqGrid (version higher as 4.6.0) won't have the described problem.