Manual Data Source Operations
By default, the Grid will receive the entire collection of data, and it will perform the necessary operations (like paging, sorting, filtering) internally.
You can perform all data operations yourself (e.g. on the server) and load data on demand by using the OnRead event of the Grid. The data source will be read after each CUD operation as well, to ensure fresh data.
Make sure to get familiar with all the general
OnReadevent documentation first.
Examples
Below you can find a few examples of using the OnRead event to perform custom data source operations. They may not implement all operations for brevity. They showcase the basics only, and it is up to the application's data access layer to implement them. You can read more about implementing the CUD operations in the CRUD Operations Overview article.
The comments in the code provide explanations on what is done and why.
Examples:
- Custom paging with a remote service
- Telerik .ToDataSourceResult(request)
- Grouping with OnRead
- Aggregates with OnRead
- Virtual Scrolling with OnRead
- Get Information From the DataSourceRequest
- Use OData Service
- Serialize the DataSoureRequest to the server
- Debounce Data Source Operations and Requests
Custom paging with a remote service
The example below demonstrates how to use just Paging with a remote service. For a more complex setup including other Grid functionalities (such as sorting, filtering etc.) you can check this project for using Telerik DataSourceRequest and DataSourceResult on the server in our public repository.
Telerik .ToDataSourceResult(request)
If you have all the data at once, the Telerik .ToDataSourceResult(request) extension method can manage the operations for you.
You can find examples of how to use this object to easily retrieve data on the server in a performant manner in the following repo: https://github.com/telerik/blazor-ui/tree/master/grid/datasourcerequest-on-server.
We support the
System.Text.Jsonserialization that is built-in in Blazor.
Use Telerik .ToDataSourceResult() extension method to filter, sort and page data.
Grouping with OnRead
When the Grid needs to be grouped, the shape of the data changes and it is no longer a flat list of models. Instead, the data is a nested list of AggregateFunctionsGroup objects that describe each group and include its data items.
When you bind the Grid with its Data parameter, or when using OnRead with ToDataSourceResult(), this complexity is hidden. But if you perform the data operations yourself, you need to create and populate the AggregateFunctionsGroup objects manually.
Grouping with OnRead
This approach cannot work directly with a DataTable or OData as underlying data sources, because these two external data sources do not return objects that can be converted to the data structure needed for grouping by the Grid. We recommend that you consider creating actual models to use the Grid in a native Blazor way. If that's not possible, you can consider ExpandoObject collections which are a bit more flexible and can be parsed to the needed grouping structure.
Aggregates with OnRead
When using aggregates with OnRead, the Grid expects you to set one more property of the GridReadEventArgs object - AggregateResults. Otherwise the component will show aggregate values for the current page only.
private async Task OnGridRead(GridReadEventArgs args)
{
DataSourceResult result = AllGridData.ToDataSourceResult(args.Request);
args.Data = result.Data;
args.Total = result.Total;
args.AggregateResults = result.AggregateResults;
}Virtual Scrolling with OnRead
When using virtual Grid scrolling, get the values of args.Request.Skip and args.Request.PageSize to determine the current Grid scroll offset and load the correct data items. Do not use args.Request.Page with virtual scrolling, because it is always 1.
private List<Product> GridData { get; set; } = new();
private async Task OnGridRead(GridReadEventArgs args)
{
args.Data = GridData.Skip(args.Request.Skip).Take(args.Request.PageSize);
args.Total = GridData.Count;
}Get Information From the DataSourceRequest
With a few simple loops, you can extract information from the DataSourceRequest object to use in your own API (such as filters, sorts, paging state). The Grid SearchBox value can be extracted in two ways: from the last CompositeFilterDescriptor in the args.Request.Filters collection, or from the SearchFilter property of the Grid state.