1. Home
  2. Forum
  3. Blazor
  4. Grid performance

Grid performance

Hello!

Recently I've been experimenting with Blazor WASM and a few SF controls, and came up with a Grid performance problem.
  1. When we put a grid in an SfAccordion control, expanding the accordion control takes about 2-3 seconds to complete, with total of 62 records in the grid. That then makes the whole accordion pretty unusable, because trying to expand any other item in the same instance of the control takes the same time, even if the given item is just a simple text. If we put an usual table with the same data in the accordion, the problem doesn't exist.
  2. When using hierarchical grid (as per example in the demos page), putting a grid inside grid also degrades the performance, and expanding the details can take up some time as well, depending on the amount of 'master' records and details data. The problem gets bigger when I try to expand all details using grid's API (ExpandAll() I think was the name of the method)
  3. When using virtualization mode, and scrolling all the way to the last record, and then up to first, I can notice the delay on refreshing the visible data on the grid. It looks like the grid would just load the data, instead of caching and just rendering it (the records seems 'jumping' in the grid). Also, when virtualization is enabled, using px or % units in Height property of the grid makes the virtualization behave unexpected. The grid only renders part of the records, and while scrolling down, the same records are reused.
When I was experimenting with the same datasets using typical html tables and bootstrap accordion and styling, I didn't have any performance problems, so that's why I think it's not Blazor's problem itself. I also tried rendering the same sets of data using tablesorter.js (but couldn't use it in SfAccordion control- I'll post another topic about it), and also didn't have any performance degradation.

I have attached an example project. I've ran it using the BlazorApp.Server project, and the same runtime configuration instead of IIS.

Attachment: BlazorApp_5c7a7b87.7z

5 Replies
RN Rahul Narayanasamy Syncfusion Team September 16, 2020 02:30 PM UTC

Hi Tomasz,  
 
Greetings from Syncfusion. 
 
Query: When we put a grid in an SfAccordion control, expanding the accordion control takes about 2-3 seconds to complete 
 
We have checked your reported Performance issue with Accordion component and we could replicate that issue at our end. So, we considered this case as defect and logged the bug report and you can track the issue status by the following link.  
 
Feedback Link:  
 
We will fix the performance issue and will included in our Volume 3 main release which will be Scheduled at the end of September, 2020.  
 
Query: When using hierarchical grid (as per example in the demos page), putting a grid inside grid also degrades the performance 
 
We have validated your query with the provided code snippets. In your Grid code, you have not enabled Paging or Virtualization feature. Grid renders each row and cell as individual component and loading large number of rows and cells in view will have performance impact on both memory consumption and CPU processing.  
 
To use grid without such performance impacts, you can load reduced set of rows in the grid using paging and virtualization features. 
 
Even though with paging or virtualization feature enabled, having hundreds of rows in single grid page will again introduce performance lag in the application, so you need to set reasonable page size. 
 
Reference: 
 
Query: instead of caching and just rendering it (the records seems 'jumping' in the grid & using px or % units in Height property of the grid makes the virtualization behave unexpected. The grid only renders part of the records, and while scrolling down, the same records are reused. 
 
Regarding this problem, could you please share more information(more details/video demonstration) regarding the problem. It will be more helpful to validate and provide a better solution. 
 
Regards, 
Rahul  


TO Tomasz September 17, 2020 09:00 PM UTC

Hello.

Thanks for the reply, and and information on the Accordion problems.

Now, regarding the grid problems, I have updated and attached the whole project solution, together with a few recorded videos demonstrating the problems.
In the Examples page, I have updated the following sections:
  1. Hierarchical Grid- Added a note in the section, remind you kindly, that whole grid have total of 62 records, and despite the fact I didn't use any virtualization or paging, that amount of records shouldn't take more than few milliseconds to render. I've also added a video showing the time required to wait before the grid gets rendered. However, this problem might be related to the Accordion content rendering problem you have scheduled to fix, since the problem occurs on a hierarchy grid, that contains another grid as a details row.
  2. Hierarchical Grid - Virtual scroll problem: added example grids and videos showing problems with 'jumping' records and 'lagging' problem. Every example have more detailed  description of the problem.
Again, about the grid performance- the same data sets on MVC Core web app renders without any problems/performance issues, using the equivalent Syncfusion grid controls for that platform, with the same hierarchy configuration.
I am not talking here about grids having thousands of records, with complex hierarchy, but even a simple one, with less than 100 records. That kind of data amount should be rendered instantly

I hope that will help narrowing down and eliminating the problems :)

Attachment: BlazorApp_v2_1241583f.7z

RN Rahul Narayanasamy Syncfusion Team September 25, 2020 04:01 AM UTC

Hi Tomasz, 

Thanks for sharing the details. 

We have validated your query with the provided information. We can able to notice some delay while opening the hierarchy grid and lagging problem in virtualization. Currently, we are validating the reported case’s at our end and we will update the further detail within in two business days. 

Regards, 
Rahul 


TO Tomasz October 6, 2020 03:55 PM UTC

Hi.

Do you have any update on the topic perhaps ?

RN Rahul Narayanasamy Syncfusion Team October 7, 2020 02:08 PM UTC

Hi Tomasz, 

Sorry for delay in get back to you. 

Query: hierarchy grid expanding speed. 

We have validated your query and we can able to notice some delay while expanding hierarchy grid in version 18.2.0.59. Recently, dotnet team announced .Net 5.0 RC1 update. In this update, dotnet team improved the performance for web assembly.  Find the below link for reference. 


We have also provided support for .Net 5.0 RC1 update from 18.3.0.35 version(from volume 3 release). We have checked the reported problem in .Net 5.0 RC1 and Syncfusion NuGet version 18.3.0.35 version. The reported delay was reduced and it will open without any noticeable delay.  


Note: This sample is created with .Net 5.0 RC1 update with Syncfusion NuGet version 18.3.0.35. You need to run this sample from latest Visual Studio Preview application. 

Query: virtual scroll jumping problem – empty space in top and bottom. 

We have checked the reported case in the provided video demonstration. To resolve this problem, we suggest you to set the page size should be two times larger than the number of visible rows in the Grid. 

The page size provided must be two times larger than the number of visible rows in the datagrid. 

<SfGrid DataSource="@((context as SensorDataModel).SensorReadings)" Height="500px" > 
<GridPageSettings PageSize="30"></GridPageSettings> 
                        . . . 
</SfGrid> 


Query: virtual scroll height in percentage problem 

When setting the grid height in percentage, then you need to set the desired Height(static height) to parent container of the grid.  So, could you please ensure this case and check the scenario at your end. 

<div style="height: 700px"> 
                    <SfGrid DataSource="@((context as SensorDataModel).SensorReadings)" Height="100%" EnableVirtualization="true"> 
                        . . . 
                    </SfGrid> 
</div> 

Reference: 

Query: virtualization lagging problem 

For this same case, we have considered this requirement “Need to provide support for virtualization with masked rows” as an improvement feature and added this feature request to our database. This feature will be included in any of our upcoming release. You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link.   
  

Please let us know if  you have any concerns. 

Regards, 
Rahul 


Loader.
Up arrow icon