hi,
we have a requirement to display a grid of approx 300 rows x 100 columns with editable checkboxes. unfortunately, the performance of such grid is sub-par to say the least. i have both rowVirtualization and columnVirtualization settings disabled. i can see the grid is rendering span html elements instead of inputs, which is good, however not good enough. i suspect the grid of this kind of size might actually crash customers' browsers. i am therefore looking for tips on how to optimise the performance of my solution
attached is an example of igGrid with 2500 (50x50) checkbox columns - poor performance is evident but feel free to increase the noOfColumns & noOfRows variables at the top of the script.
example with 20x20 http://jsfiddle.net/wwwroot/vt13ag4t/ - note the performance penalty upon clicking on any checkbox in the grid.
N.B. the custom "editCellStarted" event is there to enable desired behaviour of a single-click update
N.B the custom "onEditCellEnded" event is there to update the angularJS model we use with igGrid
is there anything that can be done to improve performance?
Hello G. Fawkes ,
You could improve the performance by enabling virtualization. It would require setting a height (for row virtualization) and width (for column virtualization) so that the grid will become scrollable and only part of the whole data is visible at a time so that the grid can render only the specific chunk in the DOM.
In this case there’s a large number of columns so enabling columnVirtualization should significantly improve the performance.
However columnVirtualization works only with fixed virtualization (which basically means that the data is loaded in the same cell’s containers – no new dom elements are added), where it expects that the columns will not have varying widths and an avgColumnWidth can be specified for them.
I’m not sure if this would meet your requirements since you seem to have columns with varying widths, still you can refer to the following example and compare the performance:
http://jsfiddle.net/zyn18j3s/6/
You can check in the console the number of millisecond needed to render the grid and compare the performance when rowVirtualization and columnVirtualization are disabled.
You can also find some additional tips for improving performance in the following topic:
http://www.igniteui.com/help/iggrid-performance-guide
Hope it helps. Let me know if there’s anything else I can help you with.
Best Regards,
Maya Kirova
Infragistics, Inc.
http://ko.infragistics.com/support
thanks, Maya. I really appreciate your help and this level of support is what going to keeps us stick with IG controls for more projects to come!
unfortunately in my case the performance of the grid is going to affect requirements. and when i say "performance" i mean the intial page load as well as interacting with the page e.g. scrolling. don't worry about editing, just see how slow the 300x100 grid with checkboxes is in IE11: http://jsfiddle.net/wwwroot/zyn18j3s/3/
i have redone this example to use textboxes and it appears to be a little responsive (http://jsfiddle.net/wwwroot/8jL4bLkp/1/) i guess i'm gonna have to stick with that, although i really like my original solution. on a smaller scale it is more responsive than the latter - i think single click vs click & type is a better UX
This is related to the issue discussed here:
http://ko.infragistics.com/community/forums/p/106040/500742.aspx#500742
The issue is due to the calls to dataBind() in the editCellEnded event handler which will re-render the whole grid each time you exit edit mode for a cell.
If your aim is to update the other checkboxes on the row you can use the setCellValue Api method.
Updated fiddle for your reference can be found here:
http://jsfiddle.net/vt13ag4t/4/
Let me know if you have any questions.