Blazorise DataGrid: Virtualize

The DataGrid Virtualize feature allows you to handle large data by limiting the data that's queried to what needs to be rendered in the UI.

Examples

Virtualization

By setting Virtualize, you will enable virtualize capabilities on the DataGrid, meaning that instead of having pagination, you'll be able to scroll across the data with perceived improved performance. Virtualization is a technique for limiting UI rendering to just the parts that are currently visible. For example, virtualization is helpful when the app must render a long list of items and only a subset of items is required to be visible at any given time. You will still have access to every available DataGrid feature. VirtualizeOptions allows to further customize the Virtualize feature.
#
First Name
Last Name
Email
Salary
 
<DataGrid TItem="Employee"
          Data="@employeeList"
          @bind-SelectedRow="@selectedEmployee"
          Responsive
          RowStyling='(x,y ) => y.Style = "height: 70px;"'
          Virtualize
          VirtualizeOptions="@(new() { DataGridHeight = "250px"})">
    <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.Email )" Caption="Email" Editable />
    <DataGridColumn Field="@nameof( Employee.Salary )" Caption="Salary" DisplayFormat="{0:C}" DisplayFormatProvider="@System.Globalization.CultureInfo.GetCultureInfo( "fr-FR" )" Editable>
        <EditTemplate>
            <NumericInput TValue="decimal" Value="@((decimal)context.CellValue)" ValueChanged="@(v => context.CellValue = v)" />
        </EditTemplate>
    </DataGridColumn>
</DataGrid>

@code {
    private readonly EmployeeData EmployeeData = new();
    private List<Employee> employeeList;
    private Employee selectedEmployee;

    protected override async Task OnInitializedAsync()
    {
        employeeList = await EmployeeData.GetDataAsync();
        await base.OnInitializedAsync();
    }
}

API

See the API reference for the parameters, events, methods, and related types available to the components covered on this page.

On this page