Scrolling in Blazor Grid

• May 08, 2024
• 3 minutes to read

The DevExpress Blazor Grid ships with a built-in scrollbar. The scrollbar appears automatically if content does not fit the component container. You can also activate a virtual scrolling option.

Display a Scrollbar

You can define a CSS rule to limit Grid dimensions both in fixed and relative units. The following example sets the Grid’s maximum height to 300 pixels and displays a vertical scrollbar:

<style>
    .grid-size {
        max-height: 300px;
    }
</style>

<DxGrid Data="Products"
        CssClass="grid-size"
        PageSize="15">
    <Columns>
        <DxGridCommandColumn Width="150px" />
        <DxGridDataColumn FieldName="ProductName" Width="300px" />
        <DxGridDataColumn FieldName="CategoryId" Caption="Category Name" Width="150px" />
        <DxGridDataColumn FieldName="UnitPrice" DisplayFormat="c" Width="120px" />
        <DxGridDataColumn FieldName="UnitsInStock" Width="120px" />
        <DxGridDataColumn FieldName="QuantityPerUnit" Width="150px" />   
        <DxGridDataColumn FieldName="Discontinued" Width="100px" />
    </Columns>
</DxGrid>

Horizontal Scrolling

A horizontal scrollbar appears when the total width of all columns exceeds the specified width of the component. Refer to the following topic for more information on how the Grid component calculates column widths: Layout Specifics in Blazor Grid.

You can specify a column’s FixedPosition property to freeze the column and keep it visible on screen while a user scrolls content horizontally.

Vertical Scrolling

A vertical scrollbar appears when the height of the component’s content exceeds the component’s specified height. The DevExpress Blazor Grid supports vertical virtual scrolling. In both regular and virtual scrolling modes, you can call the following methods to scroll the Grid rows up or down to the target record:

MakeRowVisible

Navigates to the row with the specified visible index.

MakeDataItemVisibleAsync

Navigates to the row bound to the specified data item.

Virtual Scrolling

In this mode, users can scroll through all data rows without paging. The PageSize property has no effect and the pager is hidden.

Run Demo: Virtual Scrolling

To improve overall performance, the Grid renders all rows that are in the viewport and some rows above and below the viewport. The exact number of rows depends on the bound data source and the current grid layout. In addition, you can set the Grid’s TextWrapEnabled property to false to disable word wrap in Grid cells and ensure that all rows have the same height. The same row height simplifies layout calculations and, therefore, improves scrolling performance further. For server-side data, our Grid component loads data in small chunks on demand when a user scrolls content.

To enable virtual scrolling, set the Grid’s VirtualScrollingEnabled property to true:

<DxGrid Data="Products"
        VirtualScrollingEnabled="true">
    @* ... *@
</DxGrid>

When vertical virtual scrolling is enabled, the Grid component switches the Select All checkbox to Mixed. The checkbox is always in the indeterminate state. Refer to the SelectAllCheckboxMode following property description for more information.