Rendering Performance of Grid in IE8

[yucheng.qianParticipant]

Hi,

I’m using v2.8.3 on a web application where a lot of the users are using IE8. I’m wondering if there’s any dos and don’ts when using several jqGrids on one page with quite some configurations, because each of the grids is taking about 500ms to render with < 300 records, making IE8 to freeze for a few seconds for 4-5 grid to finish rendering. Here're some of the code snippets of those grids:

Grid 1: —————————————————————————–
$("#jqx_mutations").jqxGrid({
theme: "",
width: 910,
height: 90,
autoheight: false,
showemptyrow: false,
editable: true,
disabled: !isRequestEditableNEW(),
columns: [{
text: "Mutation",
datafield: "mutation"
}, {
text: "Effect",
datafield: "effect"
}, {
text: "",
width: 20,
datafield: "mutationid",
hidden: !isRequestEditableNEW(),
editable: false,
columntype: "button",
cellsrenderer: function (row, column, value) {
return "X";
},
buttonclick: function (row) {
if (globalPage != "request_new" && !confirm("This operation is irretrievable make sure you want to remove this order!")) {
return;
}
var rowid = $("#jqx_mutations").jqxGrid('getrowid', row);
$("#jqx_mutations").jqxGrid("deleterow", rowid);
}
}],
source: new $.jqx.dataAdapter({
localdata: mutation_list,
datatype: "array",
datafields: [{
name: "index"
}, {
name: "mutationid"
}, {
name: "mutation"
}, {
name: "effect"
}],
addrow: function (rowid, rowdata, position, commit) {
if (globalPage != "request_new" && !confirm("Are you sure you want to add a new mutation to this request?")) {
return;
}
updateMutationsNEW("add", rowdata, function (result) {
commit(true);
});
},
updaterow: function (rowid, rowdata, commit) {
commit(true);
if (globalPage == "request_new") {
updateMutationsNEW("update", {
index: rowdata.index,
mutation: rowdata.mutation,
effect: rowdata.effect
});
} else {
updateList.push({
type: "mutation",
params: [rowdata.index, rowdata.mutation, rowdata.effect]
});
}

},
deleterow: function (rowid, commit) {
if (globalPage != "request_new" && !confirm("Delete opearation is irretrievable. Make sure you want to delete this."))
return;
updateMutationsNEW("remove", {
index: rowid
}, function (result) {
commit(true);
if ($("#jqx_mutations").jqxGrid("source").records.length == 0) {
$("#add_mut").prop("checked", true).prop("disabled", true);
}
});
}

})

}
});

Grid 2: ———————————————————————–
$("#jqx_recommendedvectors").jqxGrid({
theme: "",
width: 910,
height: 210,
showfilterrow: true,
filterable: true,
disabled: !isRequestEditableNEW(),
pageable: true,
pagesize: 5,
source: new $.jqx.dataAdapter({
datatype: "json",
datafields: [{
name: "productid"
}, {
name: "vectorname"
}, {
name: "n_tag"
}, {
name: "c_tag"
}, {
name: "system"
}, {
name: "host"
}, {
name: "preferred"
}],
id: "productid",
url: "newrequest/recommended",
type: "POST"
}),
columns: [{
text: "",
datafield: "productid",
hidden: !isRequestEditableNEW(),
filterable: false,
columntype: "button",
cellsrenderer: function () {
return "+";
},
buttonclick: function (row) {
if (globalPage != "request_new" && !confirm("This operation is irretrievable. Are you sure you want to add a this vector?")) {
return;
}
var rowdata = $("#jqx_recommendedvectors").jqxGrid("getrowdata", row);
if (rowdata) {
$.post("newrequest/selectedvectors/add", $.param({
productid: rowdata.productid,
value: ""
}), function (vectors) {
displaySelectedVectorsNEW(vectors);
});
}
}
}, {
text: "Vector Name",
datafield: "vectorname",
filterable: false,
width: 235,
cellsrenderer: function (row, column, value, defaultHTML) {
// preferred vectors are bold
var rowdata = $("#jqx_recommendedvectors").jqxGrid("getrowdata", row);
if (rowdata.preferred) {
var $html = $(defaultHTML);
$html.css("font-weight", "bold");
return $html[0].outerHTML;
}
return defaultHTML;
}
}, {
text: "N Tag",
datafield: "n_tag",
filterable: false,
width: 190
}, {
text: "C Tag",
datafield: "c_tag",
filterable: false,
width: 190
}, {
text: "System",
datafield: "system",
filtertype: 'list',
width: 125
}, {
text: "Host",
datafield: "host",
filtertype: 'list',
width: 125
}],
ready: function () {
var $grid = $("#jqx_recommendedvectors");
// default filters
$grid.jqxGrid("clearfilters");
var filter = new $.jqx.filter();
filter.addfilter(0, filter.createfilter("stringfilter", "Gateway", "EQUAL"));
$grid.jqxGrid("addfilter", "system", filter, true);
filter = new $.jqx.filter();
filter.addfilter(0, filter.createfilter("stringfilter", "Mammalian", "EQUAL"));
$grid.jqxGrid("addfilter", "host", filter, true);
}
});

Grid 3: ———————————————————————————-
$("#jqx_selectedvectors").jqxGrid({
theme: "",
width: 910,
height: 150,
showemptyrow: false,
editable: true,
disabled: !isRequestEditableNEW(),
source: new $.jqx.dataAdapter({
localdata: vectors,
datatype: "array"
}),
columns: [{
text: "Vector Name",
datafield: "vectorname",
editable: false
}, {
text: "N Tag",
datafield: "n_tag",
columntype: "dropdownlist",
initeditor: function (row, cellvalue, editor) {
var rowdata = $("#jqx_selectedvectors").jqxGrid("getrowdata", row);
var source = ["None"];
if (rowdata.n_original && rowdata.n_original.toUpperCase() != "NONE") {
source.push(rowdata.n_original);
}
editor.jqxDropDownList({
source: source,
selectedIndex: cellvalue.toUpperCase() == "NONE" ? 0 : 1
});
},
cellvaluechanging: function (row, column, columntype, oldvalue, newvalue) {
if (newvalue == "")
return oldvalue;
var rowdata = $("#jqx_selectedvectors").jqxGrid("getrowdata", row);
if (globalPage == "request_new") {
$.post("newrequest/selectedvectors/n_tag", $.param({
productid: rowdata.productid,
value: newvalue
}));
} else {
updateList.push({
type: "vector",
params: ["newrequest/selectedvectors/n_tag", rowdata.productid, newvalue]
});
}
}
}, {
text: "C Tag",
datafield: "c_tag",
columntype: "dropdownlist",
initeditor: function (row, cellvalue, editor) {
var rowdata = $("#jqx_selectedvectors").jqxGrid("getrowdata", row);
var source = ["None"];
if (rowdata.c_original && rowdata.c_original.toUpperCase() != "NONE") {
source.push(rowdata.c_original);
}
editor.jqxDropDownList({
source: source,
selectedIndex: cellvalue.toUpperCase() == "NONE" ? 0 : 1
});
},
cellvaluechanging: function (row, column, columntype, oldvalue, newvalue) {
if (newvalue == "")
return oldvalue;
var rowdata = $("#jqx_selectedvectors").jqxGrid("getrowdata", row);
if (globalPage == "request_new") {
$.post("newrequest/selectedvectors/c_tag", $.param({
productid: rowdata.productid,
value: newvalue
}));
} else {
updateList.push({
type: "vector",
params: ["newrequest/selectedvectors/c_tag", rowdata.productid, newvalue]
});
}

}
}, {
text: "Amount (ug)",
datafield: "amount",
width: 100,
columntype: "dropdownlist",
createeditor: function (row, cellvalue, editor) {
editor.jqxDropDownList({
source: amounts
});
},
cellvaluechanging: function (row, column, columntype, oldvalue, newvalue) {
if (newvalue == "")
return oldvalue;
var rowdata = $("#jqx_selectedvectors").jqxGrid("getrowdata", row);
// update selected vector when make a selection
if (globalPage == "request_new") {
$.post("newrequest/selectedvectors/amount", $.param({
productid: rowdata.productid,
value: newvalue
}));
} else {
updateList.push({
type: "vector",
params: ["newrequest/selectedvectors/amount", rowdata.productid, newvalue]
});
}

}
}, {
text: "",
datafield: "productid",
hidden: !isRequestEditableNEW(),
width: 32,
columntype: "button",
cellsrenderer: function () {
return "X";
},
buttonclick: function (row) {
if (globalPage == "request_new" || globalPage == "request_review" || globalPage == "request_fulfill") {
var productid = $("#jqx_selectedvectors").jqxGrid("getrowdata", row).productid;
if (globalPage != "request_new" && !confirm("This operation is irretrievable. Are you sure you want to remove this vector?")) {
return;
}
$.post("newrequest/selectedvectors/remove", $.param({
productid: productid,
value: ""
}), function (vectors) {
displaySelectedVectorsNEW(vectors);
});
}
}
}]
});

[Peter StoevKeymaster]

Hi,

Unfortunately, from the provided code I cannot tell what could be the issue on your side. In addition, the rendering performance in the current version – 2.9.3 is better.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[Author]

Posts