1. Home
  2. Forum
  3. Blazor
  4. How to improve performance in Grid

How to improve performance in Grid

I have an sfgrid control in my application.I have bind data in grid which contains 4000 records.But It take 10 to 15 seconds to load data in grid on initial load.please advise how to improve performance in grid on initial load.


Note:-

I have enabled paging and virtualization but still  I am getting performance issue on initial load.


7 Replies
VN Vignesh Natarajan Syncfusion Team November 30, 2021 08:26 AM UTC

Hi KINS,  
 
Thanks for contacting Syncfusion support.  
 
Query: “I have enabled paging and virtualization but still  I am getting performance issue on initial load.” 
 
We would like to inform you that both Paging and Virtualization cannot be enabled to same Grid. We have ensured the reported issue at our end by preparing a sample with Grid configuration of (4000 record and 8 columns) with paging enabled (12 records per page). We are unable to reproduce the reported performance issue at our end.  
 
Kindly refer the below sample 
 
 
Kindly share the following details to validate the reported query at our end.  
 
  1. Share the details how you are binding the datasource to Grid (i.e.) using DataSource property / SfDataManager
  2. Are you facing issue while fetching data from your service / database or while binding the data to Grid.
  3. Share the Grid code example.
  4. If possible share more details about your datasource and issue.
  5. Also share the video demonstration of the issue you are facing.
 
Above requested details will be very helpful for us to validate the reported query at our end and provide solution as early as possible. 
 
Regards, 
Vignesh Natarajan 


KI KINS December 30, 2021 12:32 PM UTC

Sorry for late reply..

I have check above code,and there is no issue in local datasource but when I bind data from web api then its taken long time to  load data

What is the best way to load data in grid via api??


RS Renjith Singh Rajendran Syncfusion Team December 31, 2021 08:56 AM UTC

Hi Kins, 
 
We are not clear about the exact scenario you are facing the reported problem. We checked this by preparing a sample to bind 4000 records from a web api service to Grid using WebApiAdaptor. But, we could not face the reported delay with the sample from our side. We are attaching the sample for your reference. Please download the sample from the link below, 
 
Kindly refer the above sample and if you are still facing difficulties then the following details would be helpful for us to proceed further. 
 
  1. Share a simple issue reproducing sample based on your scenario for us to validate.
  2. If possible reproduce the problem with the above attached sample and share with us for further analysis.
  3. Share a video demo showing the replication of the problem you are facing.
  4. Share the complete Grid code with model class codes.
  5. Are you facing issue while fetching data from your service/database or while binding the data to Grid.
 
The provided information will help us analyze the problem, and provide you a solution as early as possible. 
 
Regards, 
Renjith R 


KI KINS January 10, 2022 05:22 PM UTC

Sorry for late reply..

I have tested the performance issue.It seems its related to blazor web assembly.

Actually when I get data from blazor client side using "GetFromJsonAsync" then it takes time to fetch data from server.where as when I test the same api in postman tool then its very fast to fetch data from server.


Please advise how to fetch data as fast in blazor web assembly .


Note:-

I am using .net 5.0 with visual studio 2019



RN Rahul Narayanasamy Syncfusion Team January 11, 2022 12:59 PM UTC

Hi KINS, 

Thanks for the update. 

Query: Actually when I get data from blazor client side using "GetFromJsonAsync" then it takes time to fetch data from server. 

We have checked your query with the provided details. We have get the data using GetFromJsonAsync and bind it to the Grid. We could not face the reported problem(delay while fetching data). Find the below code snippets and sample for your reference. 

Also, we suspect that the data fetching operation might be delay from your end. So for this scenario, we suggest you to show the Grid after the data is fetched from your service like below. 

@inject HttpClient Http 
 
@if (forecasts != null)     //render the Grid while the data is available 
{ 
    <SfGrid DataSource="forecasts" AllowPaging="true" @ref="dataGrid"> 
        <GridColumns> 
            <GridColumn Field="@nameof(WeatherForecast.Id)" IsPrimaryKey="true"></GridColumn> 
            <GridColumn Field="@nameof(WeatherForecast.Date)" HeaderText="Date"></GridColumn> 
            <GridColumn Field="@nameof(WeatherForecast.Summary)" HeaderText="Summary"></GridColumn> 
            <GridColumn Field="@nameof(WeatherForecast.TemperatureF)" HeaderText="F"></GridColumn> 
        </GridColumns> 
    </SfGrid> 
} else 
{ 
    <p>Loading...Fetching Data...</p> 
} 
 
@code { 
 
    SfGrid<WeatherForecast> dataGrid; 
    private WeatherForecast[] forecasts; 
 
    protected override async Task OnInitializedAsync() 
    { 
        forecasts = await Http.GetFromJsonAsync<WeatherForecast[]>("WeatherForecast"); 
    } 
} 


If you are still facing the problem, then could you please share the below details. It will be helpful to validate and provide a better solution. 

  • If possible reproduce the problem with the above attached sample and share with us for further analysis.
  • Share a simple issue reproducing sample based on your scenario.
  • Share a video demo showing the replication of the problem you are facing.
  • Share the complete Grid code with model class codes.

Regards, 
Rahul 


NI Nicola May 31, 2022 01:54 PM UTC

Pay attention to NOT add a grid.Refresh() in your code.

I.e. I had await _grid.Refresh(); in the OnAfterRenderAsync and this takes a lot before renderi the grid.

Commenting this code the speed is really good.



SP Sarveswaran Palani Syncfusion Team June 1, 2022 05:40 PM UTC

Hi Nicola,


Thanks for contacting Syncfusion support.


We have checked your query and state that using Grid.Refresh() method will refresh the entire grid component. Having initial delay is a default behavior of this Grid.Refresh method. Can you explain why you want to use OnAfterRenderAsync on the refresh method? This will help us to investigate your issue further.


Please get back to us if you have any other related query


Regards,

Sarveswaran PK


Loader.
Up arrow icon