Grid inside Tab encounters delay on Initial Load

[Zhi Yuan]

Hi,

I used the code sample from https://blazor.syncfusion.com/documentation/datagrid/how-to/render-grid-inside-tab-with-specific-height/ and observed that there's delay in the loading of Grid on Initial Load. That is: 

1. Page Refresh

2. Other HTML elements loaded

3. Grid & Tabs loaded

The time difference in 2. & 3. is 7000ms as seen in the image below; the Grid & Tabs take about 7000ms to appear after all the other HTML elements have appeared.

The delay is lesser (though, still observable) on computers with higher specs, and it gets much worse on computers with lower specs. I've attached the Performance diagram generated by Chrome Devtools:

[Rahul Narayanasamy]

Hi Zhi, 

Greetings from Syncfusion. 

We have validated your query with the provided details and we will update the further details within one business day. Until then we appreciate your patience. 

Regards, 

Rahul 

[Zhi Yuan]

Hello Rahul,

Any updates? :) Thank you!

[Vignesh Natarajan]

Hi Zhi,  

Sorry for the delay in getting back to you.  

Query: “The time difference in 2. & 3. is 7000ms as seen in the image below; the Grid & Tabs take about 7000ms to appear after all the other HTML elements have appeared.” 

We have validated the reported query at our end and we are able to reproduce the reported behavior during the initial rendering as well as while switching between the tabs. Issue has occurred due to 75 records bounded to Grid without Paging feature. Compared to Blazor Server, there will some delay in Blazor WASM during certain actions.  

In SfGrid component, we have rendered each and every cell as sub component so that it can be customized and utilized by other controls. Consider the Grid control with 75 records and 5 columns, 75 * 5 = 375 components cells along with Header and Pager component. During the certain action in Grid, calling a StatehasChanged() has to be reflected in all available components. So there will be some time delay during a certain action.  

Performance can be increased by reducing the record count or enabling the Paging feature in Grid . Or if you want to render the Grid without Pager component and improve the performance of Grid. Then we suggest you to bind the datasource for Grid using the Tab events instead of OnInitialized lifecycle event. And also while switching between the tabs, kindly remove the data bounded to Grid and bound the datasource again to Grid using Tab events (Selecting and Selected).  

Refer the below code example.  

  <SfTab ID="Ej2Tab" LoadOn="ContentLoad.Demand" Width="100%"> 

        <TabEvents Created="OnCreated" Selecting="OnSelecting" Selected="OnSelected"></TabEvents> 

        <TabItems> 

            <TabItem> 

                <ChildContent> 

                    <TabHeader Text="Grid 1"></TabHeader> 

                </ChildContent> 

                <ContentTemplate> 

                    <div style="height: 400px;width:800px"> 

                        <SfGrid DataSource="@OrderData" Height="100%" Width="100%"> 

                            . . . . . 

                        </SfGrid> 

                    </div> 

                </ContentTemplate> 

            </TabItem> 

            <TabItem> 

                <ChildContent> 

                    <TabHeader Text="Grid 2"></TabHeader> 

                </ChildContent> 

                <ContentTemplate> 

                    <div style="height: 400px;width:800px"> 

                        <SfGrid DataSource="@EmployeesData" Height="100%" Width="100%"> 

                            . . . . .  

                        </SfGrid> 

                    </div> 

                </ContentTemplate> 

            </TabItem> 

        </TabItems> 

    </SfTab> 

</div> 

 

@code { 

 

    public List<Order> Orders { get; set; } 

    public List<Order> OrderData { get; set; } 

    public List<EmployeeData> Employees { get; set; } 

    public List<EmployeeData> EmployeesData{ get; set; } 

    public async Task OnCreated() // will be triggered when tab is created 

    { 

        await Task.Yield(); 

        OrderData = Orders; // update the datasource for first Grid with delay 

    } 

    public async Task OnSelecting(SelectingEventArgs Args) // will be triggered before selectign a tab 

    { 

        //empty the Grid Datasource 

        OrderData = null; 

        EmployeesData = null; 

    } 

    public async Task OnSelected(SelectEventArgs Args)// will be triggered when tab is selected  

    { 

        await Task.Yield(); 

        // here udpate the selected tag Grid data.  

        if (Args.SelectedIndex == 0) 

        { 

            OrderData = Orders; 

        } 

        else if (Args.SelectedIndex == 1) 

        { 

            EmployeesData = Employees; 

        } 

    } 

    protected override void OnInitialized() 

    { 

        Orders = Enumerable.Range(1, 75).Select(x => new Order() 

        { 

            OrderID = 1000 + x, 

            CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)], 

            Freight = 2.1 * x, 

            OrderDate = DateTime.Now.AddDays(-x), 

        }).ToList(); 

        Employees = Enumerable.Range(1, 75).Select(x => new EmployeeData() 

        { 

            EmployeeID = x, 

            FirstName = (new string[] { "Nancy", "Andrew", "Janet", "Margaret", "Steven" })[new Random().Next(5)], 

            LastName = (new string[] { "Davolio", "Fuller", "Leveringg", "peacock", "Smith" })[new Random().Next(5)], 

            Role = (new string[] { "Sales Representative", "Sales Representative", "Sales Manager", "HR Manager", "Inside Sales Coordinator" })[new Random().Next(5)], 

            HireDate = DateTime.Now.AddDays(-x), 

        }).ToList(); 

    } 

But we are facing some issues while updating the Grid datasource using the Tab events. We have considered it as bug and fixed the issue internally. The fix will be included in our 2020 Volume 2 Service Pack 1 release which is expected to be rolled out by mid of August 2020. So once that issue is resolved in 2020 Volume 2 Service Pack release, you can bound the data to grid with some delay using Tab events to increase the performance of Grid control.  

Till then we appreciate your patience.    

Regards, 

Vignesh Natarajan

[Zhi Yuan]

Hello Vignesh,

Sorry for the late response as I just had the time to try out your solution. To recap our discussion so far, the problem that I raised was that there's delay for the initial rendering of Grid, and the solution you have suggested is to enable pagination to reduce the number of cells being rendered, thus decreasing the delay.

I've instead reduced the number of rows to 5 (instead of 75) by modifying `Enumerable.Range(1, 75)` to `Enumerable.Range(1, 5)`, which would also achieve the same effect of having lesser number of cells being rendered, and thus increase performance.

However, the delay is still substantial. Based on the new Performance data that I captured using Chrome Devtools (see attached):

1. Page completes loading other html elements at *1250ms*.

2. Grid appears at *4000ms*.

The delay is about *2750ms*, which is rather substantial considering that only 5 rows are being rendered.

This is tested on .NET 5 RC1 & Syncfusion Blazor v. 18.2.0.58.

Seeking your assistance on this matter, thank you!

Attachment: Screenshot_20200918_at_9.11.56_AM_fe361be.zip

[Vignesh Natarajan]

Hi Zhi,  

Sorry for the delay in getting back to you.  

We have analyzed your query and currently we are validating the reported query at our end, we will update you the further details by 24^th September 2020.  

Till then we appreciate your patience.  

Regards,
Vignesh Natarajan 

[Vignesh Natarajan]

Hi Zhi,  

Thanks for the patience.  

We are able to reproduce the reported behavior (performance) at our end with Syncfusion.Blazor Nuget package version (18.2.0.58) and .Net 5.0 RC1. We will be upgrading our components to .Net 5.0 RC1 in our 2020 Volume 3 release which is expected to rolled out by end of this month September 2020. So we suggest you to ensure the reported behavior, once our 2020 Volume 3 release gets successfully rolled out.  

Till then we appreciate your patience.      

Regards, 

Vignesh Natarajan 

[Zhi Yuan]

Hello,

I've tried using the new Volume 3 release but noticed that this problem still exists. Any updates on this issue?

Thank you!

[Vignesh Natarajan]

Hi Zhi,  

Query: “I've tried using the new Volume 3 release but noticed that this problem still exists. Any updates on this issue?” 

 

We have validated the reported query by preparing a sample with Grid component inside a Tab control using our latest version. We are able to find significant performance increase in Grid component during the initial rendering and tab switching. For your convenience we have prepared a video demo and sample below  

Video: https://www.syncfusion.com/downloads/support/forum/156387/ze/Grid_Tab275322502  

Sample: https://www.syncfusion.com/downloads/support/forum/156387/ze/DataGridTab-841752990  

Note: Run the sample using dotnet run command by opening the csproj folder in command prompt. And open localhost://5001 in browser 

If you want to improve the performance of the Grid during the initial rendering, then we suggest you to refer the required scripts in index.html instead of dynamic loading. Refer Note section of the below UG documentation for your reference 

https://blazor.syncfusion.com/documentation/datagrid/getting-started/#add-syncfusionblazor-service-in-startupcs     

Please get back to us if you have further queries.  

Regards, 

Vignesh Natarajan  

[Joseph]

We are experiencing this issue with initial load on a tab page.

Not only with grids.

It appears binding of simple textboxes is slow and drop-down list binding a second or two.

It would be great if you could look into this issue in more depth as it's been plaguing our app development for some time now.

[Naveen Palanivel]

Hi Zhi,

Thanks for the update.

We have branched a separate ticket for the update. Kindly follow up with the mentioned thread for the further followups.

https://www.syncfusion.com/forums/175192/delay-with-initial-load-on-a-tab-page-from-forum-156387

Until then we appreciate your patience.

Regards,

Naveen Palanivel.