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 ,
This is related to the issue discussed here:
http://es.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.
Best Regards,
Maya Kirova
Infragistics, Inc.
http://es.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