Hi,
I have implemented the Radzen DataGrid with advanced filtering, sorting, and pagination. The grid includes around 7 columns and a total of 4000 rows. When I first open the application and perform filtering or sorting for the first time, it takes about 6-7 seconds to load the data. However, when I perform filtering or sorting for the second time, the data loads within 1 second.
I'm looking for ways to optimize this initial load time.
Thank you in advance
Check our forum FAQ on how to improve your post.
Hi
here is a code
<RadzenDataGrid @ref="grid" AllowFiltering="true" FilterPopupRenderMode="PopupRenderMode.OnDemand"
FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive"
AllowColumnResize="true" AllowAlternatingRows="false"
FilterMode="FilterMode.Advanced" AllowSorting="true" PageSize="50" AllowPaging="true"
PagerHorizontalAlign="HorizontalAlign.Left" ShowPagingSummary="true"
Data="@employeeList" TItem="Employee" ColumnWidth="300px" LogicalFilterOperator="LogicalFilterOperator.Or"
AllowColumnReorder="true" AllowVirtualization
SelectionMode="DataGridSelectionMode.Multiple" @bind-Value=@selectedEmployees >
<Columns>
<RadzenDataGridColumn TItem="Employee" Width="60px" Sortable="false" Filterable="false">
<HeaderTemplate>
@{
bool allSelected = grid.View.All(i => selectedEmployees != null && selectedEmployees.Contains(i));
bool noRowsSelected = selectedEmployees == null || !selectedEmployees.Any();
// bool anyUnselected = grid.View.Any(i => TRvm.SelectedTestResults != null && !TRvm.SelectedTestResults.Contains(i));
bool? triState = allSelected ? false : (noRowsSelected ? true : (bool?)null);
@if (triState == null)
{
bool? triStateValue = null;
<RadzenCheckBox TValue="bool?" Value="@triStateValue"
Change="@(args => selectedEmployees = (bool)args ? grid.View.ToList() : new List<Employee>())" />
}
else if ((bool)triState)
{
bool? triStateValue = false;
<RadzenCheckBox TValue="bool?" Value="@triStateValue"
Change="@(args => selectedEmployees = (bool)args ? grid.View.ToList() : new List<Employee>())" />
}
else
{
<RadzenCheckBox TValue="bool" Value="@(allSelected)"
Change="@(args => selectedEmployees = (bool)args ? grid.View.ToList() : new List<Employee>())" />
}
}
</HeaderTemplate>
<Template Context="data">
<RadzenCheckBox TriState="false" Value="@(selectedEmployees != null && selectedEmployees.Contains(data))"
TValue="bool" Change=@(args => { if(!allowRowSelectOnRowClick) { grid.SelectRow(data); }}) />
</Template>
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="Employee" Property="Id" Filterable="false" Title="ID" Frozen="true" Width="80px" TextAlign="TextAlign.Center" />
<RadzenDataGridColumn TItem="Employee" Property="Age" Title="Age" Width="160px" />
<RadzenDataGridColumn TItem="Employee" Property="FirstName" Title="FirstName" Frozen="true" Width="160px" />
<RadzenDataGridColumn TItem="Employee" Property="Id" Filterable="false" Title="ID" Frozen="true" Width="80px" TextAlign="TextAlign.Center" />
<RadzenDataGridColumn TItem="Employee" Property="Age" Title="Age" Width="160px" />
<RadzenDataGridColumn TItem="Employee" Property="FirstName" Title="FirstName" Frozen="true" Width="160px" />
<RadzenDataGridColumn TItem="Employee" Property="Id" Filterable="false" Title="ID" Frozen="true" Width="80px" TextAlign="TextAlign.Center" />
</Columns>
</RadzenDataGrid>
@code {
bool allowRowSelectOnRowClick = true;
private List<Employee> employeeList;
private Employee selectedEmployee;
private IList<Employee> selectedEmployees;
RadzenDataGrid<Employee> grid;
public List<Employee> Data { get; set; }
protected override async Task OnInitializedAsync()
{
await base.OnInitializedAsync();
employeeList = await EmployeeData.GetEmployeesAsync(); ;
}
public class EmployeeData
{
public static async Task<List<Employee>> GetEmployeesAsync()
{
await Task.Delay(1000);
return Enumerable.Range(1, 4000).Select(x => new Employee
{
Id = 1000 + x,
Name = (new string[] { "ALFKI", "ANANTR", "Carlon", "BLONP", "BOLID" })[new Random().Next(5)],
FirstName = (new string[] { "ALFKI", "ANANTR", "ANTON", "Joe", "BOLID" })[new Random().Next(5)],
Age = 20 + x,
}).ToList();
}
}
public class Employee
{
public int Id { get; set; }
public string Name { get; set; }
public string FirstName { get; set; }
public int Age { get; set; }
public bool Selected { get; set; }
}
}
when the application launch and I filter the data with firstname for the first time at that time it will take 6 to 7 second to load and filter data, after that it will take 1 second
I'm looking for ways to optimize the first time filtering time
Here is what I see using your code:
Looks pretty fast to me.
Hello
I have also tried this code on the web it works fast,
but I am working on .Net MAUI Blazer APP (For Desktop Applications) so it will take time to filter first time
Hey @parth.bhadiyadra,
You posted this as something related to Radzen IDE for Blazor server, while now you claim that you have ".Net MAUI Blazer APP". Try to debug your application to resolve the performance problems. If you do not follow our forum rules we will have no other option but discontinue your account.
