jqGrid addRowData slowing the process

Question

I have an array of 1000 records and i pass it javascript function. it take almost 20 sec to show data in jqgrid. I know that addDataRow method is very slow but i could not find any other alternative. Is there any way i can make it much faster ?

Script:

function GetCommodityGrid(array) {

    //    alert("Methods");
    //    var rows = array;
    alert(rows.length);
    jQuery(document).ready(function () {
        jQuery("#list").jqGrid({
            // url: 'TestGrid/GridData',
            datatype: 'local',
            //        
            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: ReturnRowList(),
            //        loadonce: false, // hit only once on the server
            rownumbers: true, // show the numbers on rows
            pager: '#pager',
            sortname: 'COM_NAME',
            viewrecords: true, // show the total records on the end of the page
            editurl: "TestGrid/EditRecord",
            caption: "JSON Example"
        });
        for (var x = 0; x <= rows.length -1; x++) {
            $("#list").addRowData(x, rows[x]);
        }
        //   jQuery("#list").setGridParam({ rowNum: 10 }).trigger("reloadGrid");

        $("#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, "", ""]
            }
        }
    });

I would recommend you additionally to use `gridview: true` option to improve performance (see [the answer](http://stackoverflow.com/a/12519858/315935)), add `autoencode: true` option to interpret cell data as strings instead of HTML fragments and add `rowNum` parameter if you want to display other number of rows as default 20. — Oleg, Aug 22 '14 at 16:02

score 1 · Accepted Answer · answered Aug 22 '14 at 14:07

In general passing your array to data option should do the trick:

jQuery("#list").jqGrid({
    datatype: 'local',
    data: rows,
    ...
});

Depending on how your array looks you might also need to add:

...
localReader: { repeatitems: true },
...

On rare cases when your data are extremely specific (you haven't included them in your question) some further changes to localReader might be required.

jqGrid addRowData slowing the process

1 Answers1