grid performance

[ramaMember]

We have a grid that has close to 40 columns. The user is generally looking at 10-15 columns and we have a way for the user to pick the columns he want to see. Some of the columns are editable. On IE8 & 9, when a cell is edited, it takes a long time to refresh that cell.
We have cellsrenderer and cellvaluechanging overrides for these editable columns to track the changes and to format the cell ( we give a visual clue of the cells changing). We do ajax update by pressing a button. The client side updates are very slow on IE. Is there something we can do to improve the performance on IE.

we are on 2.7.0.

[Peter StoevKeymaster]

Hi,

You may consider upgrading to ver. 2.9.1 – the current one. It is faster. In addition, when you make multiple updates through method calls or property settings, use the Grid’s beginupdate, endupdate methods. Call beginupdate before and endupdate after your updates.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[ramaMember]

Upgrading to 2.9.1 made is better but still a problem on IE. I am not doing the updates through method calls. It is done by making the column editable and using the functionality of the grid to edit the cell. so once cell value is changed at a time. so beginupdate and endupdate doesn’t help.

[Peter StoevKeymaster]

Hi,

How do you make a column editable after the Grid’s initialization? Isn’t it through a method call, because I do not know other way.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[ramaMember]

Yes I make the column editable after grid initialization. After the grid is loaded, the user can edit values in cells. It is when editing the values in the cell by clicking on the cell and entering a new value, it takes a long time on IE.

[Peter StoevKeymaster]

Hi,

So, if you make a column editable or non-editable after the initialization, then you should call a Grid method to make it editable or not. This means that you should definitely use “beginupdate” and “endupdate” and if you do that correctly, then you will have just 1 render and it will be fast

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[ramaMember]

This is how I making the column editable.

var columnTypeArray = [
{ text: ‘AA’, datafield: ‘AA’, width:75 , cellsalign: ‘left’, editable:true, createeditor:tagline_createeditor , cellbeginedit: tagline_cellbeginedit, cellsrenderer: editable_cellsrenderer }
]

$(“#summaryGrid”).jqxGrid(
{
width: ‘100%’,
source: dataAdapter,
theme: theme,
pageable: true,
virtualmode: true,
rendergridrows: function () {
return dataAdapter.records;
},
pagesizeoptions:[’10’,’20’,’40’,’60’],
autoheight: true,
sortable: true,
sorttogglestates: 1,
showsortcolumnbackground : false,
showpinnedcolumnbackground : false,
showsortmenuitems : false,
filterable : false,
altrows: true,
columnsheight:44,
rowsheight :23,
enabletooltips: true,
editable: true,
selectionmode: ‘singlecell’,
editmode: ‘click’,
columnsresize : true,
columns: columnTypeArray

});

and the performance problem is not when I am initializing the grid. After the grid is loaded, the user clicks on a cell and modifies the value. After a new value is entered, it takes a while to update that cell.

[Peter StoevKeymaster]

Hi,

It seems that you re-initialize the full Grid after an edit. That is wrong and will result in renders for each property change. You should use the Grid’s “setcolumnproperty” method to make a column editable or not after the initialization.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[ramaMember]

Peter
I am not sure how you got the indication that I am re-initializing the full grid after an edit. The code I posted is my initialization code and all I do is mark the column as editable. After that it is all in the framework when I click on the cell to edit it. I am not re-initializing anything and I am not handling any of the edits. All I do is mark the column as editable. Also the programmatic way of setting the value is not valid because we dont do that. we use the editable feature of the grid by simply marking the column as editable,

Only thing I can say is my grid has lot of columns (~40). At any given time the user is viewing about 15 columsn and do I do that by setting the showcolumn/hidecolumn property.

[Peter StoevKeymaster]

Hi rama,

How many times do you call “showcolumn or hidecolumn” methods? Do you call “beginupdate” before making multiple method calls or not? If you do not, then you should.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts