Blazor Grid — Virtual Scrolling CTP (v23.1)

In this blog post, I'll describe the capabilities of our Blazor Grid component's virtual scrolling mode. As the title of this post states, Virtual Scrolling is currently available as a Community Tech Preview. We expect to officially release virtual scrolling support in our next major update (v23.2, due in December). Should you have any questions about the contents of this post, feel free to submit a support ticket via the DevExpress Support Center.

Virtual Scrolling is a new data display mode in our Blazor Grid control. When Virtual Scrolling is enabled, our Blazor Grid will look as if its ShowAllRows property is enabled. In both instances (Virtual Scrolling and ShowAllRows), the Grid control displays all rows on a single page and replaces its built-in pager with a vertical scroll bar. End-users can navigate between grid rows as follows:

• Move the vertical scroll bar
• Press Up/Down or Page Up/Page Down keys
• Spin the mouse wheel
• On touch devices, slide Grid data vertically

The main difference between these modes is the rendering engine used. In ShowAllRows mode, our Blazor Grid renders all data rows simultaneously, while in virtual scrolling mode it only renders what's necessary (rows in the viewport plus a few rows above and below). When the Grid is bound to a remote data source, the Grid requests data in small chunks as the user scrolls content.

The image below illustrates how rendering size differs in these modes:

To demonstrate the effect of row virtualization, we measured rendering time of the Grid in Blazor WebAssembly and Blazor Server test apps. Test results were as follows:

Note that we measured rendering time on desktop devices. On mobile devices with much less computing power, the difference between virtual scrolling and ShowAllRows modes is much more significant (especially in WebAssembly-powered applications).

As our test results demonstrate, Virtual Scrolling mode can improve app performance by reducing Grid rendering size. To switch the Grid to Virtual Scrolling mode, set the Grid's VirtualScrollingEnabled property to true. It's important to also limit Grid height; otherwise, the Grid automatically stretches to encompass the total height of all data rows.

The example below activates Virtual Scrolling mode and limits the height of the Grid to its container's height:

<style>
    .my-grid {
        height: 100%;
    }
</style>
<DxGrid Data="@Data" CssClass="my-grid" VirtualScrollingEnabled="true">
    <Columns>
        // ...
    </Columns>
</DxGrid>

Unlimited Row Height

Most virtual scrolling implementations (including the standard Virtualize component) require that all rows maintain the same height. Unlike competing technologies, our Blazor Virtual Scrolling mode does not apply such a limitation. As such, you can virtualize Grid rows that display custom content or nested Grids (also known as master-detail views).

This capability not withstanding, Virtual Scrolling mode works best when all grid rows retain the same height. You can use our new TextWrapEnabled option to truncate long text blocks within cells, column headers, and summaries. Cells, columns, and summaries with truncated text automatically display a tooltip.

New Scrolling API

When using Virtual Scrolling mode, you cannot switch between pages (because the Grid contains only one page) and corresponding API members will not work. We've implemented the following methods to scroll grid data to a specific row:

• MakeRowVisible(Int32)
• MakeDataItemVisibleAsync(Object)

Alternatively, you can use focused row instead. Once you set focused row in code, our Blazor Grid highlights the row and navigates (scrolls) to it.

Your Feedback Matters

As always, we welcome your feedback. Please take a moment to answer the following survey questions:

Free DevExpress Products - Get Your Copy Today