DataGrid LoadData
Load Blazor DataGrid data on demand with the LoadData event - the grid passes you the current page, sort, and filter so you can fetch rows from a web API, stored procedure, or any custom data source and return just that page.
ID | Photo | First Name | Last Name | Job Title | Title | Birth Date | Hire Date | Address | City | Region | Postal Code | Country | Home Phone | Extension | Notes |
|---|
Perform custom data-binding
1. Set the Data and Count properties.
<RadzenDataGrid Count="@count" Data="@employees"
2. Handle the LoadData event and update the Data and Count backing fields (employees and count in this case).
void LoadData(LoadDataArgs args)
{
var query = dbContext.Employees.AsQueryable();
if (!string.IsNullOrEmpty(args.Filter))
{
query = query.Where(grid.ColumnsCollection);
}
if (!string.IsNullOrEmpty(args.OrderBy))
{
query = query.OrderBy(args.OrderBy);
}
count = query.Count();
employees = query.Skip(args.Skip.Value).Take(args.Top.Value).ToList();
}
LoadData and prerendering linkLink to this section
The LoadData event is raised after the component renders for the first time, which does not happen during prerendering.
With prerendering enabled the DataGrid renders empty until the application becomes interactive. To include data in the prerendered HTML,
load the first page yourself in OnInitializedAsync and assign the Data and Count properties -
the grid skips the initial LoadData invocation when Data is set and the event takes over for subsequent paging, sorting and filtering.
Persist the loaded data with PersistentComponentState (or the [PersistentState] attribute in .NET 10) to avoid
fetching it again when the application becomes interactive. The same applies to all components with a LoadData event
such as DropDown, AutoComplete, ListBox and DataList.
<RadzenDataGrid TItem="Order" Data="@orders" Count="@count" LoadData="@LoadData" AllowPaging="true" AllowSorting="true">
...
</RadzenDataGrid>
@code {
[PersistentState]
public IEnumerable<Order> orders { get; set; }
[PersistentState]
public int count { get; set; }
protected override async Task OnInitializedAsync()
{
if (orders == null)
{
var result = await orderService.GetOrders(skip: 0, top: 10);
orders = result.Items;
count = result.Count;
}
}
async Task LoadData(LoadDataArgs args)
{
var result = await orderService.GetOrders(args.Skip, args.Top, args.OrderBy, args.Filter);
orders = result.Items;
count = result.Count;
}
}
Frequently asked questions
When should I use the LoadData event?
Use LoadData when the data comes from a web API or any source you query yourself - the grid passes you the current page, sort, and filter, and you return that page plus the total count.
How is IQueryable binding different from LoadData?
With IQueryable, such as Entity Framework, the grid builds and runs the query for you. With LoadData you run the query yourself and return the page, which suits REST APIs and custom back ends.
Does LoadData work during prerendering?
No. LoadData is raised after the first render, which does not happen during prerendering, so the grid prerenders empty. To prerender data, load the first page in OnInitializedAsync, assign Data and Count, and persist them with PersistentComponentState (or the .NET 10 [PersistentState] attribute) so the data is not fetched again when the app becomes interactive. This applies to all components with a LoadData event.
Radzen Blazor Components, © 2018-2026 Radzen.
Source Code licensed under
MIT