Disable the "lazy loading" of <tr> elements into the DOM?

I'm using the Spreadsheet control with about 200 rows of data.  I notice that when the spreadsheet is first loaded, the <table> element in the DOM only contains around 80-85 rows (<tr>), until I start to scroll.  As I scroll down, additional <tr> rows are added to the DOM, while others at the top are removed.  This makes for some sluggish scrolling and temporary blank areas when users scrolling rather quickly.  It is not a very good user experience.

is there a way to force all of the rows to load into the DOM? Or can I set the number of row elements to keep in the DOM to 200, instead of 80-something?

Initial load, before scrolling...


After scrolling down a few pages...






1 Reply

SP Sangeetha Priya Murugan Syncfusion Team June 14, 2022 08:38 AM UTC


Hi John,


We have checked your reported requirement and we would let you know that we have some limitations in web platform, for number of elements rendered in the DOM. Our spreadsheet rendered maximum of 1 million cells that depends upon the rows and columns.


To improve performance for UI interactions, we have provided the row virtualization support in spreadsheet. In this we have rendered the cells (table elements) while scrolling the content. If you render more columns (> 20) the rendering time is moderately high, based on the loaded columns. So only we have rendered limited number of td elements in DOM element for performance.


Could you please check the above details and get back to us with your exact requirements for spreadsheet td elements? Based on that we will check and provide you a better solution quickly.


Regards,

Sangeetha M


Loader.
Up arrow icon