It appears that the problem still exists with the latest version (Radzen.Blazor 3.18.6) on .NET 6.
My observation confirms that it is related to network latency or bandwidth - it has acceptable performance when both the server and the browser are local or on the same LAN; switching tabs slows to an unacceptable level or even completely stops working when the datagrid becomes large and there is VPN between the browser and the server.
It is interesting to note that the initial rendering of the first tab when the page is rendered is very fast, should we expect switching to different tabs to act at the same speed?
DataGrid in other components such as Accordion appears to have the similar issue.
@korchev Below is the test page I used to test the performance. Tab switching becomes very slow at count of 200 and is completely broken (the entire page is greyed out and the browser displays "Attempting to reconnect to the server" and finally "Reconnection failed. Try reloading the page if you're unable to reconnect." after retries are exhausted) with a count over 300.
@page "/benchmark/{count:int}"
<div>
<RadzenTabs>
<Tabs>
<RadzenTabsItem Text="One">
<RadzenDataGrid AllowColumnResize="false" AllowVirtualization="false" Data="@_employees" TItem="Employee">
<Columns>
<RadzenDataGridColumn TItem="Employee" Property="Id" Title="Id" />
<RadzenDataGridColumn TItem="Employee" Property="Name" Title="Name"/>
<RadzenDataGridColumn TItem="Employee" Property="Age" Title="Age" />
<RadzenDataGridColumn TItem="Employee" Property="Gender" Title="Gender">
<Template Context="data">
<RadzenLink Path="@data.Gender" Text="@data.Gender"/>
</Template>
</RadzenDataGridColumn>
</Columns>
</RadzenDataGrid>
</RadzenTabsItem>
<RadzenTabsItem Text="Two">
<RadzenDataGrid AllowColumnResize="false" AllowVirtualization="false" Data="@_employees" TItem="Employee">
<Columns>
<RadzenDataGridColumn TItem="Employee" Property="Id" Title="Id" />
<RadzenDataGridColumn TItem="Employee" Property="Name" Title="Name"/>
<RadzenDataGridColumn TItem="Employee" Property="Age" Title="Age" />
<RadzenDataGridColumn TItem="Employee" Property="Gender" Title="Gender">
<Template Context="data">
<RadzenLink Path="@data.Gender" Text="@data.Gender"/>
</Template>
</RadzenDataGridColumn>
</Columns>
</RadzenDataGrid>
</RadzenTabsItem>
</Tabs>
</RadzenTabs>
</div>
@code
{
[Parameter]
public int Count { get; set; }
class Employee
{
public int Id { get; set; }
public int Age { get; set; }
public string Name { get; set; }
public string Gender { get; set; }
}
private Employee[] _employees;
protected override void OnParametersSet()
{
var random = new Random();
_employees = new Employee[Count];
for (var i = 0; i < Count; i++)
{
_employees[i] = new Employee()
{
Id = i,
Age = random.Next(20, 80),
Name = "TBD",
Gender = (i % 2) == 1 ? "Male" : "Female",
};
}
}
}
