We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

grid rows take too long to render when I use (column templates / queryCellInfo) to cusomize cells and page size of 200 rows

I need to be able to display a pagination of 200 rows in my table. I have page sizes of 25, 50, 100 and 200.

The performance of the grid is acceptable when it renders only text, even for a page size of 200 rows.

But sometimes, I need to render custom cells... I tried using both approaches of column templates and queryCellInfo method. I find the performance of queryCellInfo acceptable at 25 and maybe 50 rows. But it is slow at 100 rows (3-4 seconds for rendering only) and very slow at 200 rows (+7 seconds for rendering). For column templates it is even worse, it takes like double the time of queryCellInfo.

My custom templates vary between a simple icon and a button with click handler.

Is this performance expected or am I doing something wrong?

I also had a look at virtualization as a solution for this issue, but I need to display the pagination in my table. I don't think both pagination and virtualization can be implemented at the same time. correct?

1 Reply

PS Pavithra Subramaniyam Syncfusion Team December 8, 2022 12:41 PM UTC

Hi Amr Fekry,

While using more template columns and more rows, each custom template component takes considerable time to render in the DOM. So, if you increase the pageSize (for ex, 100, 500, All), then the grid takes considerable time to render each cell including the template columns in the DOM. This is the default behavior of the Grid component. If you are using more number columns and template columns in the Grid, we suggest setting the pageSize below 50 for better performance.


Pavithra S

Live Chat Icon For mobile
Up arrow icon