How to quickly load data in jqGrid

Question

The problem is loading data in jqgrid takes a lot of time, currently I am using

for(var i=0;i<homeFileList.length;i++)
        jQuery("#tblHomeFileList").jqGrid('addRowData',i+1,homeFileList[i]);

to load data into the grid, but since it is iterating, it is taking a lot of time, is there any way to load data faster?

I read the addRowData can even insert multiple data at once (Reading Link), i thought it might be faster, but it does not insert anything to my grid

See my below code.

var homeFileList=[];
$(xml).find('IPC').each(function(){ 
    $(this).children('homefilelist').each(function(){ 
        $(this).children('homefilelist_info').each(function(){ 
            var row={};
            isPresent=true;
            row.permission=$(this).attr('permission');
            row.hardlink=$(this).attr('hardlink');
            row.owner=$(this).attr('owner');
            row.group=$(this).attr('group');
            row.fsize=$(this).attr('fsize');
            row.month=$(this).attr('month');
            row.date=$(this).attr('date');
            row.time=$(this).attr('time');
            row.filename=$(this).attr('filename');
            homeFileList.push(row);
        });
    });
});

Update after Oleg's comment

//HomeFileList
if(homeFileList.length>0)
{
    jQuery("#tblHomeFileList").jqGrid({
        datatype: "clientSide",
        colNames:['Permission','Hardlink','Owner','Group','Size','Month','Date','Year/Time','Filename'],
        colModel:[
            {name:'permission',index:'permission', align:"left",width:"100px"}, 
            {name:'hardlink',index:'hardlink', align:"left", width:"80px"},
            {name:'owner',index:'owner', align:"left",width:"100px"},
            {name:'group',index:'group', align:"left"},
            {name:'fsize',index:'fsize', align:"left", width:"90px"},
            {name:'month',index:'month', align:"left",width:"100px"},   
            {name:'date',index:'date', align:"left", width:"80px"},
            {name:'time',index:'time', align:"left",width:"100px"},
            {name:'filename',index:'filename', align:"left"}
        ],

                    pager : '#HomeFileListGridpager',
        rowNum:10,
        rowList:[10,50,100],
        scrollOffset:0,
        height: 'auto',
        autowidth:true,
        viewrecords: true,
        gridview: true
            });

    /*This for loop loads my data from homeFileList into grid
for(var i=0;i<homeFileList.length;i++)
        jQuery("#tblHomeFileList").jqGrid('addRowData',i+1,homeFileList[i]);*/

    alert($.isArray(homeFileList)); //returns true


    jQuery("#tblHomeFileList").jqGrid('addRowData',homeFileList);


    jQuery("#tblHomeFileList").setGridParam({rowNum:10}).trigger("reloadGrid");
}
else
    gridUnavailable("#tblHomeFileList");

XML response (I have cut short the xml below, as it is huge data inside homefilelist)

<?xml-stylesheet type="text/xsl" href="client9.xsl"?><client version="1.0"><IPC>
<homefilelist>
    <homefilelist_info permission='-rwxr-xr-x' hardlink='1' owner='asimon' group='support' fsize='61597' month='Mar' date='22' time='2011' filename='libpmwspsvrcmn.so' />
    <homefilelist_info permission='-rwxr-xr-x' hardlink='1' owner='asimon' group='support' fsize='21778' month='Mar' date='22' time='2011' filename='libpmorablk.so' />
    <homefilelist_info permission='-rwxr-xr-x' hardlink='1' owner='asimon' group='support' fsize='36226' month='Mar' date='22' time='2011' filename='libpmjvm.so' />
</homefilelist>
</IPC>
</client>

Answer 1

If you can get your data into JSON/XML you can quickly add it by using the undocumented jqGrid.p.data attribute and just setting it, then reloading the grid. You need to make sure that your data already conforms to the columns you have mapped.

if(_theGrid == undefined) {
    _theGrid = $("#list3").jqGrid({...});
}
else {
    _theGrid.p.data = data;
    $(_theGrid).trigger('reloadGrid');
}

Answer 2

You can use data parameter of jqGrid:

$("#tblHomeFileList").jqGrid({
    datatype: "local",
    data: homeFileList,
    ...
});

See the demo. In the case the whole data of the grid will be placed in the grid and the first page will be paint. I am sure that you will see the difference in the performance for large number of rows immediately.

I recommend you additionally include formatter and sorttype attributes in the grid. For example the definition of 'fsize' which hold integer data can be the following:

{name: 'fsize', index: 'fsize', width: 90, formatter: 'integer', sorttype: 'int'}