Datagrid perforance issues
Hi team,
We have noticed couple of Grid performance issues.
1) We used WebAPI(using EF Core) to get the data and bind it to the Grid. This particular call returns around 3700 records as the user needs to have the whole list of records to play with. We implemented paging to have minimum stress while loading all the records on the Grid. There is some delay in the initial load which is manageable as we display only the first 15 records on the initial page. Now the user is selecting All option from the pagination drop down and the grid performance is really bad which is making the page unresponsive. The question is though we pulled all the records in the OnInitializedAsync() and have all the list in hand, why its taking so long to display all the records when user selects the All option from the Pagination drop down?
2) When the user hits the Edit or Add on the Toolbar its taking very long time to put the row in edit/add mode. This long wait is making the page unresponsive. When in Edit/Add mode, we have couple of Drop down columns which displays a list of values pulled from WebAPI, again this list is already fetched in the OnInitializedAsync() call. Its taking long time to populate these drop down columns. This list of values are under 20 rows.
I have used PreventRender in the ActionBegin handler when the Request type is not Save/BeforeBeginEdit, which is not helping. What are our best options to make the grid more responsive?
I have attached the screen captured video and code files for your reference.
Attachment: ProductionLogPage_(2)_77ec65e7.zip
Hi team,
any updates on this? Loading of records is taking too long to render, especially with paging.
We just have 3000 records and we are seeing its taking more than a minute to load all these records. Like I already mentioned there is no issue at the WebAPI end, data retrieval is takes couple of seconds. Issue only rendering the same on the grid. Which is why we used Paging, while some users need to load all the records that is where we are having trouble.
Please look at the attached code files and videos in my previous post.
Thanks
Baba
Hi Baba Goud Gadiga,
Greetings from Syncfusion.
We are currently checking the reported query at our end and we will update the further details within three business days(May 25, 2022). Until then we appreciate your patience.
Regards,
Naveen Palanivel.
Hello Naveen,
Thank you for taking time into looking this query.
Regarding my point # 2 in the above post, seems after we added the code Grid.PreventRender(false) in the BeginEdit event things have improved a little.
But the overall grid performance while paging and binding all 3000 records is making the page unresponsive.
Hi Baba,
Thanks for the update.
From your query we understand that PreventRender method of Grid improves the performance of the Grid. So we suspect that you are facing this issue in WASM application. We would to inform you that when StateHasChanged in called, Grid component along with its child component will be checked for re-rendering. so we suggest you to improvme the performance by preventing the unwanted rendering of Grid component using PreventRender method or PreventRender argument of event.
Kindly refer to the below UG documentation to improve the performance of Grid.
Reference:
https://blazor.syncfusion.com/documentation/datagrid/webassembly-performance
https://blazor.syncfusion.com/documentation/datagrid/webassembly-performance#avoid-unnecessary-component-renders-after-grid-events - while selecting
Please get back to us if you have further queries.
Regards,
Naveen Palanivel.
Hi Naveen,
What events do you think fire when the paging is done or at the initial load? The grid performance degrades when the user selects All option from the pager drop down list. The same happens when switching back from 'All' option to any other selection.
Currently in the ActionBegin method, I have the below code to preventRender, which I guess is not helping.
public async void ActionBeginHandler(ActionEventArgs<ProductionLog> Args)
{
try
{
if (Args.RequestType == Syncfusion.Blazor.Grids.Action.BeginEdit || Args.RequestType == Syncfusion.Blazor.Grids.Action.BeforeBeginEdit
|| Args.RequestType.Equals(Syncfusion.Blazor.Grids.Action.Paging))
{
productionLogsGrid.PreventRender(true);//setting this to false also does not help
Enabled = false;
}
else
{
//do something}
}
Hi Baba,
Greetings from Syncfusion.
While performing the paging operation, OnActionBegin events will be triggered. But calling PreventRender now while changing the page size to all will not work. Because Grid has to rendered again with entire data source. Hence the delay occur in spite of preventrender in OnActionBegin handler.
We are currently checking the reported query at our end and we will update the further details within two business days(May 27, 2022). Until then we appreciate your patience.
Regards,
Naveen Palanivel.
Thank you Naveen,
I will wait for your updates.
Thanks
Baba
Hi Baba,
Sorry for the delay in getting back to you.
We have analyzed the reported issue at our end and we are able to reproduce the reported behavior at our end also. When compared to Blazor Server application, WASM applications are much slower and has reduced performance levels compared to Blazor server. Also we have defined each cell in DataGrid control as separate Blazor component, so that it can be customized and utilized by other controls. So each and every cell for content and header component is new Blazor component.
In your sample , while choosing the All PageSize option, all the records available in DataSource (count 3500+ records) property has to rendered and displayed in Grid. In each row, you have nearly 7 columns. So 3500 & 7 = 24500 Blazor components has to be rendered along with 7 header component and pager component. Hence the considerable amount of time (considering the WASM nature) is taken and reported issue has occurred. This is default behavior to take time to render 25000 components in Grid.
So to overcome the reported issue, we kindly request you to disable the All option n page size dropdown or we request you to enable Virtualization in Grid by disabling the Pager component when All option is chosen. Using Virtualization , we can render more number of records without much performance issue.
Kindly refer the below documentation and UG sample for your reference
https://blazor.syncfusion.com/demos/datagrid/overview?theme=material
https://blazor.syncfusion.com/demos/datagrid/virtual-scrolling?theme=material
https://blazor.syncfusion.com/documentation/datagrid/virtualization
Please get back to us if you have further queries.
Regards,
Vignesh Natarajan
Hello Vignesh,
No worries in delayed response.
We do understand that the Blazor WASM performance is not on par with Server based applications. And also understand your theory of rendering components in the Grid, but as a end user we may not agree with these technical issues with rendering components. What if the Grid has to display millions of rows of data? Right now our Grid has only 3500 rows of data and in near future this number keeps growing at a rapid pace. So my concern is to address this issue as efficiently as we can, so that every one wins.
Firstly, I would like to try your workaround of enabling virtualization by disabling the Pager component when All option is chosen. What event do I need check to disable paging and enable virtualization? Also, when the user selects any option from the Pager other than All the paging should still work. It would be great if you could put up a sample code for us?
Thanks
Baba
Hello Vignesh,
In the mean time I was trying to achieve the workaround and was following the below link for the same.
https://www.syncfusion.com/forums/160404/virtualization-on-the-grid-dynamically
And instead of switching it on the click of a button, I need to achieve the same when the user selects the All option from the pager drop down and vice-versa.
<SfGrid DataSource="@ProductionLogList" @ref="productionLogsGrid" AllowSorting="true" AllowGrouping="true" ID="prodLogsGrid" GridLines="GridLine.Both" EnablePersistence="true"
AllowPaging="! enableVirtualization " EnableVirtualization="@enableVirtualization">
@if(enableVirtualization)
{
<GridPageSettings PageSize="50" />
}
else
{
<GridPageSettings PageSize="15" PageCount="5" PageSizes="@pagerDropdown" />
}
<GridColumns>
--
--
--
</GridColumns>
</sfGrid>
The code in code behind.
public bool enableVirtualization { get; set; }=false;
string[] pagerDropdown = new string[] { "All", "10", "15", "20", "50", "100" };
public async void ActionBeginHandler(ActionEventArgs<ProductionLog> Args)
{
if (Args.RequestType == Syncfusion.Blazor.Grids.Action.BeginEdit || Args.RequestType == Syncfusion.Blazor.Grids.Action.BeforeBeginEdit)
{
}
else if (Args.RequestType.Equals(Syncfusion.Blazor.Grids.Action.Paging) && (this.productionLogsGrid.PageSettings.PageSize > 100))
{
enableVirtualization = !enableVirtualization;
await Task.Yield();
await productionLogsGrid.Refresh();
}
else
{
enableVirtualization = !enableVirtualization;
await Task.Yield();
await productionLogsGrid.Refresh();
}
}
}
Attached is the video capture of the same.
Thanks
Baba
Attachment: screencapture_(5)_16c63121.zip
Just a note to the above. The updated code is below.
public async void ActionBeginHandler(ActionEventArgs
{
try
{
if (Args.RequestType == Syncfusion.Blazor.Grids.Action.BeginEdit || Args.RequestType == Syncfusion.Blazor.Grids.Action.BeforeBeginEdit)
{
}
else if (Args.RequestType.Equals(Syncfusion.Blazor.Grids.Action.Paging) && (this.productionLogsGrid.PageSettings.PageSize > 100))
{
productionLogsGrid.PreventRender(false);
enableVirtualization = !enableVirtualization;
await Task.Yield();
await productionLogsGrid.Refresh();
}
else if(Args.RequestType.Equals(Syncfusion.Blazor.Grids.Action.Paging) && (this.productionLogsGrid.PageSettings.PageSize <= 100))
{
productionLogsGrid.PreventRender(false);
enableVirtualization = !enableVirtualization;
await Task.Yield();
await productionLogsGrid.Refresh();
}
And there is another issue with this code. When virtualization is enabled, i have no way to go back to Paging. As you can see in the video the Pager controls are not visible when Virtualization is enabled.
Hi Baba,
Sorry for the Inconvenience.
We are currently checking the reported query at our end and we will update the further details within two business days(June 6, 2022). Until then we appreciate your patience.
Regards,
Naveen Palanivel.
Hi Baba,
Sorry for the inconvenience caused.
We are facing difficulties in validating your query at our end and we will update further details within two business days on or before (08.06.2022). Until then we appreciate your patience.
Regards,
Monisha
Hello Monisha,
So, we tried with enabling virtualization at design time for some of our pages which have around 1000+ records and the performance seems to be better compared to paging. But again there is a glitch with Virtualization as well.
One of our page which has 1200 records, customizes the Cell and Row back color using the QueryCellInfo and RowDataBound events. Enabling virtualization for such a page is degrading the performance again, especially when we Add/Edit a row, it is taking more than 15-20 seconds to get the row in edit mode. That is because the code is trying to loop through all the rows in QueryCellInfo and RowDataBound events and then put the row in Edit mode.
Correct me if I am wrong, why do we need to trigger the QueryCellInfo and RowDataBound events when we add or edit a row?'
Let me know if I need to create a new ticket rather than following up on the forum as this issue is getting hotter at our client sites and we need to resolve this asap.
Thanks
Baba
Hi Baba,
We have checked your query and we would like to inform that both the Querycellinfo and RowDataBound events triggers every time when cell or row is created in Grid. When add toolbar is clicked, we will include a new TR element to dom with Blazor editform which makes the Grid content to refresh and hence QueryCellInfo and RowDataBound event of Grid is triggered.
This is default behavior of the Grid to refresh the Grid content when add form is created in Grid.
Regards,
Naveen Palanivel.
Hello,
Is there any update or commitment on fixing the performance issue in the grid.
We currently use a grid in WASM with a datasource with dynamic objects. We are also using inline grid editing.
Although we have only 10 records, jumping from one input control in a column to the next column takes around 2 seconds. After a lot of investigation we discovered that all the cells in the grid get re-rendered when changing focus from one input to the next.
In our opinion, the implementation of the grid has really big performance issues and needs immediate attention.
We are already considering looking for another library for this. Please give us some good news on this.
Thank you.
Hi Gerhard,
We checked your query and we need some more information, kindly share the below details to validate further at our end.
- Share us entire Grid code snippet of along with model class
- Share us nuget version details and using any template inside the column
- Share us the event used in the grid like actionbegin or actioncomplete
- Share us the video demonstration of the issue with detailed replication procedure.
- If possible share us an simple issue reproduceable sample.
The above-requested details will be helpful for us to validate the reported query at our end and provide the solution as early as possible.
Regards,
Naveen Palanivel
- 17 Replies
- 4 Participants
-
BG Baba Goud Gadiga
- May 19, 2022 03:16 AM UTC
- Aug 11, 2022 04:02 AM UTC
