angular-ui
[Performance Increase] Improve Horizontal Scroll by not rendering rows
Summary: add grid options to not render rows whenever the horizontal scroll speed reaches a threshold in order to improve horizontal scroll performance
When the rows are not rendered (before data is in the grid). Horizontal scrolling performs much better than when there is data in the grid. The performance is impacted whenever there a lot of columns, like in excess of 100 columns.
We should have a grid option of something like gridOption.renderRowsOnHorizontalScroll = false;
and maybe have another threshold that will tell the grid when to stop rendering the rows. So if the user is scrolling fast (ie. the number of columns that will have to be re-rendered is equal to the number of columns in view +excess columns rendered) then the rows will not be rendered. This already happens when horizontal scrolling is done very quickly, but both the columns and rows disappear and ui-grid attempts to re-render both at the same time while scrolling horizontally.
gridOption.horizontalScrollRenderRowsThreshold = 10; //when the number of columns needed to be re-rendered is greater than or equal too 10 this above default to the number of columns in the view plus the number of excess columns rendered
Scrolling horizontally does not need to re-render columns which is why it outperforms rows. After a certain horizontal scrolling speed the user cannot see the row data anyway. So we should have a way to disable the rendering when scrolling to increase performance.
i was able to easily implement this myself using the customScroller feature. It would be nice to have this built into ui-grid though.
The only thing about mine though is that I have to remove the data from the grid, and then add it back, thus removing the vertical scroll bar and I have to put it back to where it was afterward. Within the code we can probably not render the view whenever scrolling over a certain speed, it would be a lot faster than removing the data completely from the grid.