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.


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 NameLast NameEmailSalary
<DataGrid TItem="Employee"
          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>
            <NumericEdit TValue="decimal" Value="@((decimal)context.CellValue)" ValueChanged="@( v => context.CellValue = v)" />
@code {
    public EmployeeData EmployeeData { get; set; }
    private List<Employee> employeeList;
    private Employee selectedEmployee;

    protected override async Task OnInitializedAsync()
        employeeList = await EmployeeData.GetDataAsync();
        await base.OnInitializedAsync();
On this page