Current filter:
                                You should refresh the page.
                                  • Hi,

                                    I want to be able to load a DataGrid with up to 10k rows and I want the user to be able to scroll through this data seamlessly. I am attempting to use virtual scrolling to achieve this.

                                    This seems to work great until either multiple selection is enabled or boolean columns are added. After either of those are added to the grid, the scroll render time increases alot and the scroll is no longer smooth as it becomes quite jumpy. I followed the advice to enable renderAsync from the article below but this does not solve the problem.


                                    I have modified your virtual scrolling demo to demonstrate this issue.


                                1 Solution

                                Creation Date Importance Sort by

                                Hi Martin,

                                DataGrid has two rendering modes during virtual scrolling: synchronous for light content and asynchronous for heavy content. The behavior depends on content rendering time. If DataGrid contains a lot of checkbox columns, content rendering time increases as a table layout becomes complex. In this case, DataGrid switches the rendering mode to asynchronous.

                                Currently, you can force the synchronous mode using the following non-documented options:

                                scrolling: { mode: "virtual", renderingThreshold: 1000, updateTimeout: 1000 }

                                I have modified your example to demonstrate it. I'd like to note that a private API can be changed at any moment without any notification.

                                I'd also like to thank you for your feedback and the example. We will take this configuration into account for future performance improvements.

                                • Martin McSharry 02.14.2019

                                  Hi Konstantin,

                                  Could you explain what the options renderingThreshold and updateTimeout do?

                                  Since you are forcing the synchronous mode, shouldn't renderAsync be set to false?


                                • Artem (DevExpress Support) 02.14.2019

                                  Hi Martin,

                                  Here are my comments:

                                  - The renderAsync option is related to the editor rendering only. It's not connected with the scrolling implementation.
                                  - The renderingThreshold option identifies after what delay it's necessary to use async. rendering for content. DataGrid automatically checks the current content loading time on scrolling to decide what strategy to choose.
                                  - The updateTimeout option can be used to set up a delay that should be used to synchronize layout changes (call updateDimensions)  when scrolling is performed.  If you set this option to the large value, you'll see that some dimensions and table elements (e.g., rows between fixed and non-fixed columns, columns width, etc.) are re-rendered with a delay.