Posted 21 April 2022, 11:17 am EST
Hi,
I have noticed that there is a significant drop in scrolling performance when a number of rows have their visible property set to false. This seems to me as if these rows are still being rendered ( or at least run through the render cycle ) and then just removed or hidden at the last step, which doesn’t seem like the best solution. Surely a row with a visible property of false should never be rendered or processed to begin with?
I have made a stackblitz showcasing this problem here: https://stackblitz.com/edit/angular-5uyjot?file=src/app/app.component.ts
You can see in the stackblitz that the grid performs perfectly well when all rows are visible, but as soon as you hit the button to toggle some row’s visible property, the performance while scrolling drops significantly. All I’ve done here is make it so that all odd rows set their visible property to false when the button is toggled.
Please note that I am not going to limit the grid to a smaller height, or reduce the number of rows visible at a time in order to improve performance. We are also already using a custom cell factory, which does not help with performance in this regard.
I have found an alternate solution to achieve what I want, where I manipulate the collection view to add or remove what I want, which is working, but it seems to be counter-productive. Setting the visible property to true or false seems to be the more correct solution here, but results in an unusable performance drop, especially when combined with other more advanced grid features like item formatters and cell templates.
Are there any specific reasons as to why we still process cells in rows that are not visible? Is that even what is happening here, and if not, what is causing this drop in performance?
Thanks
