I use jqGrid on an ASP.NET page and paste the datainto on the script block on the page and then load from there. For this one use case it is necessary that we have a large amount of data visible on the screen at the same time. which includes 300 ~ 500 records with 30 columns in each row. Paging is not suitable for this case. The user should be able to scan a massive amount of data, select 40 ~ 60 lines, and then go to another screen.
I was not sure if this would be a good approach to begging for jqGrid, but in prototyping everything works pretty fast. However, the transition to multi-selection production is very slow.
I narrowed the pain point in jQueryUI 1.8. If I return only to jQueryUI 1.7, it is fast enough.
jQueryUI example 1.7 ~ 17.htm
jQueryUI example 1.8 ~ 18.htm
note: the examples show the difference more in FireFox and IE, Chrome looks fine
Both pages use the latest jqGrid 3.8 with all options selected.
loading jQuery and jQueryUI from Google CDN
<base href="http://ajax.googleapis.com/" />
<link href="/ajax/libs/jqueryui/1.8/themes/start/jquery-ui.css" type="text/css" />
<script src="/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
<script src="/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
loading jqGrid JS / CSS from my server
<link type="text/css" href="http://mymx.biz/jqGrid/ui.jqgrid.css" />
<script src="http://mymx.biz/jqGrid/grid.locale-en.js" type="text/javascript"></script>
<script src="http://mymx.biz/jqGrid/jquery.jqGrid.min.js" type="text/javascript"></script>
and my big local dataset
<script src="http://mymx.biz/jqGrid/getGridData.js?v=1" type="text/javascript"></script>
example row from a dataset
var gridData = [
{id:"1",aa:"aa1",bb:"bb1",cc:"cc1",dd:"dd1",ee:"ee1", ff:"ff1",
gg:"gg1", hh:"hh1", ii:"ii1", jj:"jj1", kk:"kk1", ll:"ll1", mm:"mm1", nn:"nn1"},
{...}
];
My basic jqGrid settings
$(function () {
var gridData = getGridData();
setupGrid(gridData);
});
function SelectRow(rowid) {
console.log("rowid: " + rowid);
}
function setupGrid(gridData) {
$("#testGrid").jqGrid({
data: gridData,
height: 'auto',
rowNum: gridData.length,
multiselect: true,
datatype: 'local',
multiboxonly: false,
gridview: true,
onSelectRow: function (rowid) { SelectRow(rowid); },
colNames: ['id', 'aa', 'bb', 'cc', 'dd', 'ee', 'ff',
'gg', 'hh', 'ii', 'jj', 'kk', 'll', 'mm', 'nn'],
colModel: [
{ name: 'id', width: 40 },
{ name: 'aa', width: 40 },
{ name: 'bb', width: 40 },
{ name: 'cc', width: 40 },
{ name: 'dd', width: 40 },
{ name: 'ee', width: 40 },
{ name: 'ff', width: 40 },
{ name: 'gg', width: 40 },
{ name: 'hh', width: 40 },
{ name: 'ii', width: 40 },
{ name: 'jj', width: 40 },
{ name: 'kk', width: 40 },
{ name: 'll', width: 40 },
{ name: 'mm', width: 40 },
{ name: 'nn', width: 40 }
],
caption: "Test Grid"
});
}
If anyone has an idea why the grid is so slow that jQueryUI 1.8 vs jQueryUI 1.7 would be much appreciated.