Hello everybody!
So, I already have JQGrid in my application, and the mesh speed didn't bother me until I started optimizing.
If you find that even if I have a small grid (20 elements per page), the hover highlight is slow, and if the grid needs a scroll bar on the page, the page scrolls very slowly.
I tried asynchronous messages as well as loadonce: true, and both of them draw as slowly.
I am using jquery.ui.theme css.
I removed the paging all together so that the grid contains only 20 elements on the screen, and for now, draw the hover slowly.
Just to be sure that this is not something else on my page, I set the grid display to none, and the page ran as usual - just as I suspected.
Using the IE8 debugger, I used a profiler to measure the speeds of my javascript and html, and those speeds were very fast - so this is definitely a drawing of the grid on the screen.
I would appreciate any help and suggestions for improving productivity.
I will attach my grid definition (it is quite large) if you think it might be something there:
$("#tblVariables").jqGrid({
url: '/StudyAdmin/GetVariable.aspx?FilterType=' + Filter + '&SelectedFolder=' + SelectedFolder + '&SelectedGroup=' + SelectedGroup,
datatype: "json",
mtype: "POST",
colNames: ['Variable Name', 'Hidden Original Text', 'Original Text', 'Label', 'Hidden', 'Groups', 'HiddenGroups'],
colModel: [
{ name: 'VarName', index: 'VarName', editable: false },
{ name: 'VarOriginalText', index: 'VarOriginalText', hidden: true, editable: true, editrules: { edithidden: true} },
{ name: 'VarOriginalTextToShow', index: 'VarOriginalTextToShow', editable: false, sortable: false },
{ name: 'VarReportingText', index: 'VarReportingText', editable: true },
{ name: 'HiddenVar', index: 'HiddenVar', editable: true, edittype: "select", editoptions: { value: { "true": "True", "false": "False"}} },
{ name: 'Groups', index: 'Groups', editable: false },
{ name: 'HiddenGroups', index: 'HiddenGroups', hidden: true, editable: true, editrules: { edithidden: true} }
],
editurl: "/StudyAdmin/Editvariable.aspx",
height: "100%",
gridComplete: function () {
var grid = jQuery("#tblVariables");
var ids = grid.jqGrid('getDataIDs');
for (var i = 0; i < ids.length; i++) {
var rowId = ids[i];
var splitGroups = $('#tblVariables').getCell(rowId, 'HiddenGroups').split(",");
if (splitGroups.length == 1 && splitGroups[0] == "") splitGroups = "";
var GroupSelect = "<select id='Group_" + rowId + "' onchange='filterGroup(this)'>";
if (splitGroups.length > 0) GroupSelect += "<option value='HasSelectGroup'>Select Group</option>";
else GroupSelect += "<option value='NotHasSelectGroup'>No Groups</option>";
for (var k = 0; k < splitGroups.length; k++) {
GroupSelect += "<option value='" + splitGroups[k] + "'>" + splitGroups[k] + "</option>";
}
GroupSelect += "</select>";
grid.jqGrid('setRowData', rowId, { Groups: GroupSelect });
}
setGridWidth($("#VariableGridContentConainer").width() - 19);
},
afterInsertRow: function (rowid, rowdata, rowelem) {
$("#" + rowid).addClass('jstree-draggable');
},
ondblClickRow: function (id, ri, ci) {
lastSelRow = id;
$("#tblVariables").jqGrid('editRow', id, true);
},
onSelectRow: function (id) {
if ($('#QuestionTree').find("#FQ" + id).attr("id") !== undefined) {
$.jstree._focused().select_node("#FQ" + id);
}
if (id == null) {
$('#tblAnswers').GridUnload();
loadAnswersGrid("-1");
} else {
$('#tblAnswers').GridUnload();
loadAnswersGrid(id);
if (id && id !== lastSelRow) $("#tblVariables").jqGrid('saveRow', lastSelRow);
}
},
viewrecords: true,
rowNum: 20,
loadonce: true,
pager: jQuery('#pagernav'),
sortname: 'VarName',
sortorder: "asc",
imgpath: '/Content/Images/',
jsonReader: {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: true,
cell: "cell",
id: "id"
}
});