Question

I am having bad performance with jqGrid when it loads more than 100 rows. Below is the code I am using for ospatches data from my xml. How can i use data option of jqGrid in this context to make it a bit faster?

var ospatches=[];

$(xml).find('patch').each(function(){ 
var row={};
row.name=$(this).attr('name');
ospatches.push(row);
    });


$('#detailTable').empty();
$('<div width="100%">')
.attr('id','ospatchesSpan')
.html('<div class="titleBlue">Configuration&gt;System&gt;Os Patches</div>'+
    '<table id="list1" width="100%"></table>'+
    '<div id="gridpager"></div>'+
'</div>')        
.appendTo('#detailTable');    



jQuery("#list1").jqGrid({
datatype: "clientSide",
height: 250,
   colNames:['Name'],
   colModel:[
       {name:'name',index:'name', align:"right"},

   ],
   pagination:true,
   pager : '#gridpager',
   rowNum:10,
   scrollOffset:0,
   height: 'auto',
   autowidth:true,
viewrecords: true,
gridview: true,
edit:false,
add:false,
del:false

});



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

jQuery("#list1").setGridParam({rowNum:10}).trigger("reloadGrid");

Answer 1

I wrote you before about the advantages of the usage data parameter, but probably you are new in the subject and not full understand what I mean. So I made the demo for you. It uses the data which you posted in your previous question. You can see that the 395 rows of data are loaded immediately. You can choose combobox in the pager to display all the rows at once and you will see that performance is very good.

Moreover I wrote you before that you can simplify your code which recreate the contain of the $('#detailTable') div. In the demo I used just $("#list1").jqGrid('GridUnload') instead.

I include the code of the example below:

$('#reload').click(function(){
    $.ajax({
        url:'ospatches.xml',
        dataType:'xml',
        success: function(xml) {
            var ospatches=[];
            $(xml).find('patch').each(function(){
                var row={};
                row.name=$(this).attr('name');
                ospatches.push(row);
            });

            $("#list1").jqGrid('GridUnload');

            $("#list1").jqGrid({
                datatype: 'local',
                data: ospatches,
                colNames:['Name'],
                colModel:[
                    {name:'name',index:'name', align:"right"}
                ],
                pager: '#gridpager',
                rowNum:10,
                rowList:[10,100,1000],
                height: 'auto',
                width: 500,
                viewrecords: true,
                gridview: true
            });
        }
    });
});