RadzenGrid slowing Tab changes?

Hi,

I noticed that when I have a RadzenGrid in a Tab of RadzenTabs, when I click the tab, it takes time for the tab content to appear. You can witness this even on the demo site here

https://blazor.radzen.com/datagrid

I have the same behavior in my app. I have a RadzenGrid having beteen 60 and 200 rows and it takes from 1 to 3 seconds to appear. It is related to the number of rows.

This is even without altering the class that has all the data behind.

Any clue?

Tab changing is performed on the Blazor side (not on JavaScript side) and all components in the tab are bound and rendered. Bigger components and slow data retrieval will cause slow rendering.

I am still getting this issue too. I am using .NET 5 WASM and Radzen 3.8.1. Whether I have 1000 rows or 0 loaded, it still is slow between tab changes. I am loading no new data between the tab changes. It gets slower and slower as the # of columns increases in the grid

The number of columns might increase because of the way Blazor will parse child content defined as code block (columns in foreach for example). You can try to set RenderMode of the tab to client to avoid this.

Sorry let me rephrase my question. Switching tabs is slow when those tabs contain datagrid(s) with AllowFiltering="true". It does not have to do with any loading times since all the data is already loaded. And even with no data in the grid, it is still just as slow. It takes up to 5 seconds to load sometimes.

Have you tried to set this?

The Tabs component doesn't handle many components very well. If I have any repeating list, such as the DataGrid or DataList, with like textboxes in the columns, it will take lots of seconds to switch tabs. The RenderMode doesn't change a thing. Please refer to this thread.

Also @enchev, recently I did some research on this and found out many ways of toggling elements visibility. There is the display (none:flex) and the visibility (hidden:visible). I tested showing the tab content with these properties when switching tabs and the contents were shown instantly. I'll create a test app to showcase what I mean.

To show/hide elements with JavaScript on switching tab you should render them initially which will cause huge performance hit with many tabs and complex components.

We already use display:none when render mode is set to client radzen-blazor/RadzenTabs.razor at master · radzenhq/radzen-blazor · GitHub