Virtual Scrolling

• May 27, 2026
• 2 minutes to read

In Standard mode, the vertical scrollbar allows users to navigate data rows on the current GridView page. In virtual scrolling mode, the extension loads data dynamically through callbacks and allows users to navigate all data rows with the vertical scrollbar. Set the GridViewSettings.Settings.VerticalScrollBarStyle property to GridViewVerticalScrollBarStyle.Virtual to enable virtual scrolling. If you use it together with the pager, GridView automatically switches to the corresponding page as users scroll.

Note

When virtual scrolling is turned on and row focusing is enabled, the first row is always focused between callbacks.

For virtual scrolling to work properly, the following rules should be observed.

• All rows should have the same height.
• It is necessary to adjust the values of the ASPxGridViewPagerSettings.PageSize (via GridViewSettings.SettingsPager.PageSize) and ASPxGridSettings.VerticalScrollableHeight (via GridViewSettings.Settings.VerticalScrollableHeight) properties of the GridView extension, so that the total height of rows within a page meets or exceeds the page height.
• Width dimension properties (such as grid width and column width) should be specified.

Example

The code sample below illustrates how to implement virtual scrolling within the GridView extension.

Partial View code:

Razor

@Html.DevExpress().GridView(settings =>
{
    settings.Name = "MyGridView";
    settings.CallbackRouteValues = new { Controller = "Home", Action = "GridViewPartial" };

    settings.KeyFieldName = "CustomerID";
    settings.Columns.Add("ContactName").Width = 150;
    settings.Columns.Add("CompanyName").Width = 200;
    settings.Columns.Add("City").Width = 100;
    settings.Columns.Add("Region").Width = 100;
    settings.Columns.Add("Country").Width = 100;

    settings.SettingsPager.PageSize = 20;
    // Enable virtual scrolling.
    settings.Settings.VerticalScrollBarMode = ScrollBarMode.Visible;
    settings.Settings.VerticalScrollableHeight = 200;
    settings.Settings.VerticalScrollBarStyle = GridViewVerticalScrollBarStyle.Virtual;
}).Bind(Model).GetHtml()