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

"Nice" to see someone with the same problem.

I opened your example and clicking on rows or checkbox performs badly with UI 1.8.

We (php project, data locally stored in a JSON-variable, locally processed (sorting, filtering), no paging, up to 1000 records at once) were faced with the same problem and did not find a solution yet. UI 1.7 performs nice in any browser, but with the change to 1.8 we noticed some heavy performance issues with only firefox (3.6, no lower version tested). IE6, our other supported browser works fine (at least this time :-)

I tried to find out the root of this problem and used firebug to profile the runtime of different functions called after the click. I know there is a different event handling by jquery for different browsers (normalization), but I do not knwow if this has any impact.

The result can be be found here: profile.png

Maybe you see anything noticeable in this list.

As we also did not find any solution to this, we downgraded to UI 1.7.3 (which comes up with other but minor problems).

Kai

edit: Did you report this problem in the jqGrid forum? Most problems will be at least approached.

edit2: Ok, after some further investigations and some research I found a workaround. As described here (http://www.trirand.com/blog/?page_id=393/bugs/compatibility-bug-with-jquery-ui-1-8-4/), the problem can be (temporarily) solved by removing the following line from the UI's css:

.ui-widget :active { outline: none; }

I can confirm that there's no performance issue anymore after removing this line. As this rule has no effect to our style, the workaround becomes a fix for us... :-)

Answer 2

These are general observations I've made with regard to JQGrid and IE >= 7. I've seen you example pages and many of these won't affect your specific situation.

• IE doesn't handle large javascript well - keep your javascript small and it will load jqgrid faster.
• Don't pass html elements when loading the grid, building them after the load improves initial load speed.
• If you can - Use paging, this will improve load speed and interactive states.
• You can load you whole grid data at once and still include paging - no need to call the server multiple times. This will slow initial load, but improve paging speeds.
• If you can, add this :<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> to the head of your html. It will run IE 8 in IE 7 mode, which I find works faster with JQGrid.
• Event propagation in jquery, so adding an event listener to a parent with children will also activate that event on the children. When interacting with other DOM object, keep this in mind. Jquery .hover prevents propagation.
• This is an important one - :hover in IE is slow and really really slow in IE 8!
• Jquery theme roller - The Interaction states section uses :hover on a tags and when hovering inserts a background image, which when removed improves performance a lot I find. So for exmaple background: #5d5f69 url(/content/images/ui-bg_flat_75_5d5f69_40x100.png) 50% 50% repeat-x; should be background: #5d5f69; This improves interactive states.

Let me know you findings - I'm still looking for ways to improve my grid speed too.