Forum
06:02
23/09/2010
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.
Most Users Ever Online: 715
Currently Online:
37 Guest(s)
Currently Browsing this Page:
1 Guest(s)
Top Posters:
OlegK: 1255
markw65: 179
kobruleht: 144
phicarre: 132
YamilBracho: 124
Renso: 118
Member Stats:
Guest Posters: 447
Members: 11373
Moderators: 2
Admins: 1
Forum Stats:
Groups: 1
Forums: 8
Topics: 10592
Posts: 31289
Newest Members:
, razia, Prankie, psky, praveen neelam, greg.valainis@pa-tech.comModerators: tony: 7721, Rumen[Trirand]: 81
Administrators: admin: 66