This not correct. Just call clearGridData WITHOUT to use trigger("reloadGrid");

While the data is deleted you reload the data again which causes the problem.

Insted if you want to use reloading you will need to call reloading only within setTimeout function.

Regards

Also, is there any method to delete all the rows from the grid. currently we are using $grid.clearGridData().trigger("reloadGrid") ? While we are using clearGridData() method, browser throws the below warning:

Stop running this script?

A script on this page is causing your web browser to run slowly. If it continues to run, your computer might become unresponsive.

You should use data option of jqGrid and create the grid with all the data in one operation. Usage of addRowData is slower bacause it insert the data in the grid row after the row. Every inserting of the row follows recalculation of position of all other exsiting element on the page or at least to reflow (see here for more details).

Usage of data option event without virtual scrolling (without scroll: true) should get you much performance impronement. It's important to continut to use gridview: true which you already use now.

If you need to update contain on existing grid you can use getGridParam("data") to get the reference to the internal data parameter, then you can change it by direct assignment and trigger reloadGrid event.

Best regards
Oleg

As a project requirement, there are 5 grids in a page. I tried by loading one JQ grid using Array data load with 1000 records containing 1 checkbox column and 7 text columns.

For loading 1000 records, JQ grid takes 3 seconds in 4GB RAM system and 20 seconds in 2GB RAM system 

Is there any configuration can be done, in order to reduce the load time?

Highly appreciate your value add comments & suggestions.

Here is the code I'm using:

var JQGridTest = JQGridTest || {};

JQGridTest.PersonGrid = (function () {
    var $PersonGrid;

    var init = function () {
        $PersonGrid = $("#PersonGrid").jqGrid(buildpersonGridInitObject())
    };

    var addPersonDetails = function () {
        var data = [];
        for (var i = 0; i < 1000; i++) {
            data[i] = {
                PersonNumber: "P " + i,
                BDate: "01/01/" + i,
                JobStatus: "Working",
                JobStatusValue : "WKNG",
                DEPT: "DEPT " + i,
                JobDescription: "Job " + i,
                MinExp: i,
                MaxExp: i,
                PersonDbKey: i,
                Person_Person_DbKey: i + i               
            };
        }

        $PersonGrid.addRowData("Person_Person_DbKey", data, "last");
    };

    var buildpersonGridInitObject = function () {
        return {
            datatype: "local",
            scroll: true,
            height: 500,
            autowidth:true,
            width: 945,
            shrinkToFit: false,
            multiselect: true,
            sortname: "PersonNumber",
            loadonce: false,
            sortable: true,
            altRows: true,
            altclass: "alternateRow",
            rowNum: 10000,
            gridview: true,
            colNames: [
                        "Person number",
                        "birth date",
                        "JOB Status Value",
                        "JOB status",
                        "DEPT",
                        "Job description",
                        "min exp",
                        "max exp",
                        "Person DbKey",
                        "Person_Person_Dbkey"
                      ],
            colModel: [
                        { name: "PersonNumber", index: "PersonNumber", sortable: true, width: 80, align: "center", sorttype: "text" },
                        { name: "BDate", index: "BDate", sortable: true, sorttype: "date", width: 80, align: "center", sorttype: "date" },
                        { name: "JobStatus", index: "JobStatus", sortable: true, hidden: true, sorttype: "text" },
                        { name: "JobStatusValue", index: "JobStatusValue", sortable: true, width: 80, align: "center", sorttype: "integer" },
                        { name: "DEPT", index: "DEPT", sortable: true, width: 100, align: "center", sorttype: "text" },
                        { name: "JobDescription", index: "JobDescription", sortable: true, width: 368, align: "left", sorttype: "text" },
                        { name: "MinExp", index: "MinExp", sortable: true, sorttype: "integer", width: 80, align: "center" },
                        { name: "MaxExp", index: "MaxExp", sortable: true, sorttype: "integer", width: 80, align: "center" },
                        { name: "PersonDbKey", index: "PersonDbKey", sortable: true, hidden: true, sorttype: "integer" },
                        { name: "Person_Person_DbKey", index: "Person_Person_DbKey", key: true, sortable: true, hidden: true, sorttype: "text" }
                      ]
        };
    };

    return {
        init: init,
        addPersonDetails: addPersonDetails
    };

})();

Calling jQuery Code:

$(document).ready(function () {
    JQGridTest.PersonGrid.init();
    $("#selectMinMax").click(function () {
        var d1 = new Date();
        JQGridTest.PersonGrid.addPersonDetails();
        var d2 = new Date();
        var d3 = (d2 – d1);
        var seconds = Math.round((d2 – d1)/1000)
        $("#loadTime").text(d3 + " , " + seconds);
        //alert(d3);
    });
});

HTML:

<table id="PersonGrid"></table>

<input type="button" id="selectPerson" name="selectPerson" value="select" class="gridbutton" />

Thanks,
Bommannan.R