kalinwilson on Slow performance using addRowData

Fri, 28 Jan 2011 06:02:38 +0200

As I mentioned in my previous post, I'm using two grids with local data as a multi-select mechanism. The candidate grid is populated using addRowData in an ajax callback that receives an array of JSON objects from the server. I've noticed that if grouping is defined and activated the grid is populated and rendered quickly (1-2s for 500 rows). If grouping is false or undefined, the rendering is very slow. The visible rows may render fairly quickly but the grid is unresponsive until all rows are defined. Grouping appeared to be broken as when the data was sorted/grouped, I would lose the last row of data. But this may be because I had rowNum:-1 to display all rows. I'll use a large number and see if the sort/grouping works correctly.

What is the most efficient way to load a potentially large local data set? I tried addJSONData but it didn't work with either a straight array of objects or with the 'pages', totalPages', etc defined for the reader.

here is my grid definition and the code for the loader:

var candidateGridOpts = {

datatype: 'local',

colNames: ['Id', 'Name', 'Type', 'ClassId'],

colModel: [{name:'id', index:'id', width:50,hidden:true,sortable:false, formatter:'integer',editable:false,sorttype:'int'},

                  {name:'name', index:'name',width:300,sortable:false,editable:false}

                  {name:'type',index:'type',width:100,sortable:false,editable:false,summaryType:'count',summaryTpl:'{0}'},

                  {name:'classId',index:'classId',width:250,hidden:true, sortable:false,editable:false}],

height:'300',

width:'50%',

autowidth:false,

rowNum:-1,

rownumbers:true,

rownumberWidth:40,

sortname:'name',

sortorder:'asc',

hidegrid:false,

gridview:false,

footerrow:true,

caption: 'Candidates  <button id="clearCandidatesButton">Clear</button>',

grouping:true,

groupingView: {groupField:['type'], groupDataSorted:false, groupColumnShow:[true], groupText:['{0} ({1})']}

}

// the other grid is defined similarly

// definded outside ready function. this is a callback for ajaxForm

function displayCandidates(candidates, status, request, form){

jQuery("#candidateList").jqGrid('clearGridData');

if(candidates.length < 1){

    alert("No Candidates were found for your query");

} else {

    for(var i=0; i < candidates.length; i++){

      jQuery("#candidateList").jqGrid('addRowData', candidates[i].classId, candidates[i]);

    }

    updateFooters();

}

}

Originally I had a jsonReader defined to populate cells by name. I can't remember when I removed that from the grid options. Perhaps defining the jsonReader would help. Still it's odd that rendering is faster if grouping is on.

jQuery Grid Plugin - jqGrid - Topic: Slow performance using addRowData

kalinwilson on Slow performance using addRowData