Blazorise DataGrid: Large Data
The DataGrid
Read Data feature allows you to handle Large Data by providing you with a centralized ReadData
Method that allows you to query your data by pages.
Large Data
By default, DataGrid
will load everything in memory and it will perform the necessary operations like paging, sorting and filtering. For large datasets this is impractical and so for these scenarios it is advised to load data page-by-page.
This is accomplished with the use of ReadData
event handler and TotalItems
attribute. When you define the usage of ReadData
the DataGrid
will automatically switch to manual mode and every interaction with the grid will be proxied through the ReadData
. This means that you as a developer will be responsible for all the loading, filtering and sorting of the data.
ReadData
event handler used to handle the loading of dataTotalItems
total number of items in the source data-set
Bellow you can find a basic example of how to load large data and apply it to the DataGrid
.
Just as in the previous example everything is the same except that now we must define the attribute ReadData
and TotalItems
. They’re used to handle all of the loading, filtering and sorting of an actual data.
Additionally you will find the support for generating an ODataQuery by using the provided extension ToODataString
.
@using Blazorise.DataGrid.Extensions; <DataGrid TItem="Employee" Data="" ReadData="" TotalItems="" PageSize="10" ShowPager Responsive> <DataGridCommandColumn /> <DataGridColumn Field="@nameof(Employee.Id)" Caption="#" Sortable="false" /> <DataGridColumn Field="@nameof(Employee.FirstName)" Caption="First Name" Editable /> <DataGridColumn Field="@nameof(Employee.LastName)" Caption="Last Name" Editable /> <DataGridColumn Field="@nameof(Employee.Salary)" Caption="Salary" DisplayFormat="{0:C}" DisplayFormatProvider="@System.Globalization.CultureInfo.GetCultureInfo("fr-FR")" Editable> <EditTemplate> <NumericEdit TValue="decimal" Value="@((decimal)context.CellValue)" ValueChanged="@( v => context.CellValue = v)" /> </EditTemplate> </DataGridColumn> </DataGrid> <Row> <Column> <Card> <CardHeader> ODataQuery </CardHeader> <CardBody> <Code>@oDataQuery</Code> </CardBody> </Card> </Column> </Row>
@code { [Inject] public EmployeeData EmployeeData { get; set; } private List<Employee> employeeList; private string oDataQuery; protected override async Task OnInitializedAsync() { employeeList = await EmployeeData.GetDataAsync(); await base.OnInitializedAsync(); } private int totalEmployees; private async Task OnReadData( DataGridReadDataEventArgs<Employee> e ) { oDataQuery = e.ToODataString( "https://services.odata.org/V4/Northwind/Northwind.svc/Employees" ); if ( !e.CancellationToken.IsCancellationRequested ) { List<Employee> response = null; // this can be call to anything, in this case we're calling a fictional api //var response = await Http.GetJsonAsync<Employee[]>( $"some-api/employees?page={e.Page}&pageSize={e.PageSize}" ); if ( e.ReadDataMode is DataGridReadDataMode.Virtualize ) response = ( await EmployeeData.GetDataAsync() ).Skip( e.VirtualizeOffset ).Take( e.VirtualizeCount ).ToList(); else if ( e.ReadDataMode is DataGridReadDataMode.Paging ) response = ( await EmployeeData.GetDataAsync() ).Skip( ( e.Page - 1 ) * e.PageSize ).Take( e.PageSize ).ToList(); else throw new Exception( "Unhandled ReadDataMode" ); if ( !e.CancellationToken.IsCancellationRequested ) { totalEmployees = ( await EmployeeData.GetDataAsync() ).Count; employeeList = new List<Employee>( response ); // an actual data for the current page } } } }
API
See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.