jQuery Grid Plugin - jqGridForum

Topic RSS

selection performance issue

09/06/2010
21:30

bodyjar

Member

Members

Forum Posts: 6

Member Since:
09/06/2010

Offline

I'm using jqGrid 3.6.5, my grid have 11 columns and show 100 rows without scrolling.

everything works well except for one thing, when I click on a row it takes 2 seconds to be selected.

I tried to decrease the number of rows showen to 10 and it works fine. The problem is that I have a checkbox in the first row and when I click on it, it won't be checked before the row is selected. I tried to find a away to disable the row selection without success…

09/06/2010
22:11

bodyjar

Member

Members

Forum Posts: 6

Member Since:
09/06/2010

Offline

Update: It's only in firefox.

09/06/2010
23:12

mikesmith

Member

Members

Forum Posts: 47

Member Since:
26/01/2010

Offline

I am facing a similar issue with 16 columns.

10/06/2010
20:50

bodyjar

Member

Members

Forum Posts: 6

Member Since:
09/06/2010

Offline

Here is

a sample of the javascript:

$.jgrid.no_legacy_api = true;
$.jgrid.useJSON = true;
$.extend($.jgrid.defaults, {
   autowidth:true,
   height:"100%",
   altRows: true,
   loadonce: true,
   forceFit: true,
   rowNum:100,
   gridview:true,
   datatype:"json",
   jsonReader:{
           id: "id",
           root: "rows",
           cell: "",
           userdata: "userdata",
           repeatitems:false
       }
});
$().ready(function() {
   $('#grid').jqGrid({
   url:"grid3.php",
   colNames:['Col1',
           'Col2',
           'Col3',
           'Col4',
           'Col5 <a href="grid3.php" style="text-decoration: none;">V</a>',
           'Col6.<a onclick="javascript:divPopUp(\'Col6Note\',\'200\',\'300\');" href="javascript:;">[?]</a>',
           'Col7 <a href="grid3.php" style="text-decoration: none;">V</a>',
           'Col8',
           'Col9',
           '<span class="hiddenInGrid">Col10</span>',
           'Col11 <a onclick="javascript:divPopUp(\'Col11Note\',\'200\',\'300\');" href="javascript:;">[?]</a>'
       ],
   colModel:[{name:"col1",
           align:'center',
           formatter:selectCheckbox,
           editable:false,
           resizable:false,
           width:20,
           search:false,
           hidedlg:true,
           sortable:false},
       {name:"col2",
           formatter:formatterCol2,
           width:85,
           search:false,
           sortable:false},
       {name:"col3",
           formatter:formatterCol3,
           width:200,
           search:false,
           sortable:false},
       {name:"col4",
           width:119,
           search:false,
           sortable:false},
       {name:"col5",
           width:34,
           search:false,
           sortable:true},
       {name:"col6",
           width:44,
           search:false,
           sortable:false},
       {name:"col7",
           width:40,
           search:false,
           sortable:true},
       {name:"col8",
           formatter:formatterCol8,
           width:122,
           search:false,
           sortable:false},
       {name:"col9",
           width:38,
           search:false,
           sortable:false},
       {name:"col10",
           formatter:formatterCol10,
           width:18,
           search:false,
           resizable:false,
           sortable:false},
       {name:"col11",
           width:37,
           search:false,
           sortable:false}
           ]
   });
});

Here is the json structure:

{"page":1,"records":100,"rows":[
{"col1": "a","col2": "b","col3": "c","col4": "d","col5": "e","col6": "f","col7": "g","col8": "h","col9": "i","col10": "j","col11": "k"},
...
],"total":100,"userdata":{"ud1":true,"ud2":0}}

When you click on a checkbox in the first column, it takes almost 2 seconds to be checked, I observed that it was related with the time for the row to be selected. In a more complex page with header, left menu, content, footer it's even longuer.

16/06/2010
16:59

bodyjar

Member

Members

Forum Posts: 6

Member Since:
09/06/2010

Offline

Ok the problem was in the jQuery-UI Css

the section:

/* Interaction states
----------------------------------

This is very heavy for the cpu, you can resolve that by removing that section and define your own interaction states...

13/07/2010
01:29

mikesmith

Member

Members

Forum Posts: 47

Member Since:
26/01/2010

Offline

My css skills are not the best. Can you give me an example of how to define my own interaction states to improve selection performance? Maybe you can post your own example.

Thanks for your help

All RSS

Forum Timezone: Europe/Sofia

Most Users Ever Online: 715

Currently Online:
56 Guest(s)

Currently Browsing this Page:
1 Guest(s)