jqGrid multiselect is very slow with large local data and jQueryUI 1.8, jQueryUI 1.7 is fine

Question

I am using jqGrid in an ASP.NET page and injecting the datainto a script block on the page and then loading from there. For this one use case it is necessary that we have a large amount of data visible on the screen at once. which involves 300~500 records with 30 columns on each row. Paging for this case is not a good fit. The user needs to be able to scan the mass amount of data, select 40~60 rows and then move off to another screen.

I was unsure if this would be a good fit in the begging for jqGrid but in prototyping everything worked plenty fast enough. However moving to production it is painfully slow in the multi-select mode.

I have narrowed down the pain point to jQueryUI 1.8. If I revert just that back to jQueryUI 1.7 it is plenty fast enough.

example of jQueryUI 1.7 ~ 17.htm

example of jQueryUI 1.8 ~ 18.htm

note: the examples show the difference the most in FireFox and IE, Chrome seems ok

Both pages use the latest jqGrid 3.8 with all options selected.

loading jQuery and jQueryUI from the 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 large local dataset

<script src="http://mymx.biz/jqGrid/getGridData.js?v=1" type="text/javascript"></script>

example row from 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 setup calls

    $(function () {
      var gridData = getGridData(); // pulls from getGridData.js
      setupGrid(gridData);
    });

    function SelectRow(rowid) {
      // I will be firing AJAX calls here in the future
      console.log("rowid: " + rowid);
    }

    function setupGrid(gridData) {
      $("#testGrid").jqGrid({
        data: gridData,
        height: 'auto',
        rowNum: gridData.length,
        multiselect: true,
        datatype: 'local',
        multiboxonly: false,
        gridview: true, // not sure if this is needed since jqGrid 3.6
        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 some insight why the grid is so slow with jQueryUI 1.8 vs jQueryUI 1.7 would be much appreciated.

Answer 1

Somehow I can't write a comment, so I'm writing this as an answer. Did you find a solution to this problem? I have a quite similar problem. The only difference for me is that selecting/unselecting only behaves laggy when clicking directly on the checkbox. If I select the row by clicking elsewhere the performance is quite fast.