How to improve grid rendering speed?

[aim Systems]

I'm currently using the Syncfusion Grid Component.

To improve reusability, I've created a custom component based on ejs-grid, which I use throughout the project. The main features I use are:

• Column filtering

• Applying specific classes to cells using rowDataBound

• columnTemplate customization

• Auto fit

• Dynamic column settings

• Reordering

• Context Menu

I don’t use grouping, and features like selecting, filtering, and column freezing are used selectively.

Initially, I was handling paging on the client side. However, once the number of rows per page exceeds 500, rendering performance significantly drops.

While exploring possible solutions, I came across virtual scrolling. I tried implementing it, but noticed screen flickering when scrolling, and rendering was still slow despite using virtual scroll.

https://ej2.syncfusion.com/vue/demos/#/tailwind3/grid/grid-overview.html

In the Syncfusion sample source code, I observed that the virtual area is split into visible and hidden sections. The visible area on my grid shows about 30 rows, so I set the height accordingly. However, the virtual scroll area seems to render more rows than that. It appears to set the container height based on data count × row height, and then adjust the view using CSS (translateY), correct? Still, this approach turned out to be quite slow.

I also checked the official demo site and noticed that virtual scrolling becomes noticeably slower as the number of columns increases.

I'm looking for other ways to improve rendering performance.

For context:

• My grid has approximately 40 columns

• It displays about 35 rows per view

• The dataset is around 2,000 rows

• I tried testing with 100,000 rows, but the UI froze during rendering, so I had to stop the test

Some documentation suggested that setting a fixed grid height could improve performance when using virtual scroll, but it didn’t seem to make a significant difference in my case.

I also tried infinite scroll, but the performance wasn’t satisfactory either.

In conclusion, even though I’m not using many advanced grid features, it still takes 2–3 seconds to render even a relatively small dataset, which feels too slow.

If the number of columns or rows, i.e. the number of cells, has a significant impact on the rendering speed, please let me know the threshold at which the speed slows down.

 I’ll provide my source code—please check if there’s anything wrong or that can be optimized.

[aim Systems]

I am uploading it additionally because the source code is missing.

Attachment: carrier_d43fdf3b.zip

[Joseph Christ Nithin Issack]

Hi Aim Systems,

Greetings from Syncfusion support.

Based on your query, you want to increase the rendering speed of the grid. Based on the details provided, you are rendering the grid with more than 500 records, 40 columns, the Grid will render a total of 20,000 cells in the DOM at initial render. Performance may degrade slightly due to the significant number of DOM elements being rendered (potentially up to 20,000 cells) with the columnTemplates etc. To optimize performance in such scenarios, features such as paging, virtualization, or infinite scrolling are typically recommended.

However, when a large number of columns are involved (40), this will still result in a significant number of cells being rendered at once. We suggest you enable both row and column virtualization in your grid. As we can see that you have enabled only rowVirtualization in the code example provided.

Please refer the below documentation for more details on pagination feature of the EJ2 Grid.

Documentation:
Row Virtualization: https://ej2.syncfusion.com/vue/documentation/grid/scrolling/virtual-scroll#row-virtualization

Column Virtualization: https://ej2.syncfusion.com/vue/documentation/grid/scrolling/virtual-scroll#column-virtualization

Implementing these best practices will help improve the responsiveness and stability of your grid.

For more details on improving the performance of the EJ2 Grid, kindly refer the below documentation.

Documentation: https://ej2.syncfusion.com/vue/documentation/grid/performance

Additionally follow the below steps to improve a significant performance in the EJ2 Grid.

• Reduce Column Complexity by rendering only the necessary columns by enabling Column Virtualization
• Avoid the use of complex templates and value accessors unnecessarily.
• Minimize logic inside rowDataBound. Avoid DOM manipulation or complex conditionals.
• Use CSS classes conditionally via column definitions instead of setting them dynamically.
• Set a fixed height and width for the grid and columns. This helps the EJ2 Grid calculate layout faster.
• Consider switching to server-side actions if your dataset is large. This drastically reduces the load on the client.

Note: The key factor here is DOM weightage. The fewer elements in the DOM, the better the performance. Conversely, a larger number of elements will lead to decreased performance. Therefore, to ensure optimal performance, it is recommended to keep the total number of elements in the DOM to a minimum.

If you have any further questions or require additional assistance, please do not hesitate to get in touch with us.

Regards,

Joseph I.

[aim Systems]

I don't want to use Column Virtualization.
To minimize complexity, I’ve removed all column templates. I’m using rowDataBound only to change the background color of specific cells.
Aside from that, there is no DOM manipulation at all. I’ve set a fixed height for the Grid, but column widths are controlled using autoFit.

As for server-side processing, we are not loading all the data at once, and this could interfere with the built-in filtering functionality inside the Grid.
Can you suggest any other alternatives?

[Joseph Christ Nithin Issack]

Hi Aim Systems,

As we have mentioned in the previous update, it is necessary to enable column virtualization when the total number of columns are more like 40+ as it may affect the performance significantly. Also, when the autoFit property is set to true, the Grid will automatically adjust its column width based on the content inside them. In normal resize mode, if the autoFit property is set to true, the Grid will maintain any empty space that is left over after resizing the columns. However, in auto resize mode, the Grid will ignore any empty space. This will also affect the performance significantly while resizing the grid columns dynamically to fit to the content of the column with large number of columns.

If you do not want to use the column virtualization feature, kindly share the exact reason for the same, are you using any other feature that is not compatible with column virtualization?

You have also mentioned that you are facing difficulties with the built-in filtering of the EJ2 Grid as you are not loading the all at once. Kindly share the below details for further validations.

• Explain the exact issue you are facing while performing filtering action. Are you not able to get the filter choice items in filter popup or any other issue?
• Are you facing any script errors in the console window? If so share the screenshot of the issue.
• Share the details of the dataManager and adaptor you are using for fetching the data from the server.
• Share a video demo of the issue you are facing.
• Share a simple issue reproducing sample.