asp.net - jqGrid multiselect is very slow with large local data and jQueryUI 1.8, jQueryUI 1.7 is fine -

i using jqgrid in asp.net page , injecting datainto script block on page , loading there. 1 use case necessary have large amount of data visible on screen @ once. involves 300~500 records 30 columns on each row. paging case not fit. user needs able scan mass amount of data, select 40~60 rows , move off screen.

i unsure if fit in begging jqgrid in prototyping worked plenty fast enough. moving production painfully slow in multi-select mode.

i have narrowed down pain point jqueryui 1.8. if revert jqueryui 1.7 plenty fast enough.

example of jqueryui 1.7 ~ 17.htm

example of jqueryui 1.8 ~ 18.htm

note: examples show difference in firefox , ie, chrome seems ok

both pages use latest jqgrid 3.8 options selected.

loading jquery , jqueryui 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 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 large local dataset

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

example row 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 getgriddata.js       setupgrid(griddata);     });      function selectrow(rowid) {       // firing ajax calls here in 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 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 has insight why grid slow jqueryui 1.8 vs jqueryui 1.7 appreciated.

"nice" see same problem.

i opened example , clicking on rows or checkbox performs badly ui 1.8.

we (php project, data locally stored in json-variable, locally processed (sorting, filtering), no paging, 1000 records @ once) faced same problem , did not find solution yet. ui 1.7 performs nice in browser, change 1.8 noticed heavy performance issues firefox (3.6, no lower version tested). ie6, our other supported browser works fine (at least time :-)

i tried find out root of problem , used firebug profile runtime of different functions called after click. know there different event handling jquery different browsers (normalization), not knwow if has impact.

the result can be found here: profile.png

maybe see noticeable in list.

as did not find solution this, downgraded ui 1.7.3 (which comes other minor problems).

kai

edit: did report problem in jqgrid forum? problems @ least approached.

edit2: ok, after further investigations , research found workaround. described here (http://www.trirand.com/blog/?page_id=393/bugs/compatibility-bug-with-jquery-ui-1-8-4/), problem can (temporarily) solved removing following line ui's css:

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

i can confirm there's no performance issue anymore after removing line. rule has no effect our style, workaround becomes fix us... :-)