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

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.