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.
        
- ReadDataevent handler used to handle the loading of data
- TotalItemstotal 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 } } } }
Expression Compiler
            This utility enables you to compile expressions and use them in conjunction with the DataGrid ReadData() to build an IQueryable for querying your data.
        
            The ExpressionCompiler can work alongside the DataGridColumnInfo collection provided by ReadData to create expression-based queries (IQueryables) that can be utilized in ORMs like Entity Framework.
        
@using Blazorise.DataGrid.Extensions; @using Blazorise.DataGrid.Utils <DataGrid @ref=dataGridRef TItem="Employee" Data="" ReadData="" TotalItems="" PageSize="10" ShowPager Responsive Filterable FilterMode="DataGridFilterMode.Menu"> <DataGridCommandColumn /> <DataGridColumn Field="@nameof(Employee.FirstName)" Caption="First Name" Editable /> <DataGridColumn Field="@nameof(Employee.LastName)" Caption="Last Name" Editable /> <DataGridSelectColumn TItem="Employee" Field="@nameof( Employee.Gender )" Caption="Gender" Editable Data="EmployeeData.Genders" ValueField="(x) => ((Gender)x).Code" TextField="(x) => ((Gender)x).Description" /> <DataGridNumericColumn Field="@nameof( Employee.Childrens )" Caption="Childrens" Editable /> <DataGridDateColumn Field="@nameof( Employee.DateOfBirth )" DisplayFormat="{0:dd.MM.yyyy}" Caption="Date Of Birth" Editable /> </DataGrid>
@code { [Inject] public EmployeeData EmployeeData { get; set; } private DataGrid<Employee> dataGridRef; private List<Employee> employeeListSource; private List<Employee> employeeList; protected override async Task OnInitializedAsync() { employeeListSource = await EmployeeData.GetDataAsync(); await base.OnInitializedAsync(); } private int totalEmployees; private async Task OnReadData(DataGridReadDataEventArgs<Employee> e) { if (!e.CancellationToken.IsCancellationRequested) { var query = employeeListSource.AsQueryable().ApplyDataGridSort(e.Columns).ApplyDataGridSearch(e.Columns); if (dataGridRef.CustomFilter is not null) query = query.Where(item => item != null && dataGridRef.CustomFilter(item)); var response = new List<Employee>(); if (e.ReadDataMode is DataGridReadDataMode.Virtualize) response = query.ApplyDataGridPaging(e.VirtualizeOffset + 1, e.VirtualizeCount).ToList(); else if (e.ReadDataMode is DataGridReadDataMode.Paging) response = query.ApplyDataGridPaging(e.Page, e.PageSize).ToList(); else throw new Exception("Unhandled ReadDataMode"); await Task.Delay(Random.Shared.Next(100)); if (!e.CancellationToken.IsCancellationRequested) { totalEmployees = query.Count(); employeeList = response; } } } }
API
See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.