Vertical Scrolling

• Feb 01, 2023

By default, the VerticalGrid height is determined by the number of rows displayed on a page. To reduce the grid height, you can display its vertical scrollbar and specify the height of the scrollable area.

To achieve this goal, use the following properties.

• ASPxGridSettings.VerticalScrollBarMode (through VerticalGridSettings.Settings.VerticalScrollBarMode) - specifies the vertical scrollbar’s display mode.
• ASPxGridSettings.VerticalScrollableHeight (through VerticalGridSettings.Settings.VerticalScrollableHeight) - specifies the scrollable area’s height in pixels.

When vertical scrolling is enabled, you can anchor required rows to the grid’s top edge. To learn more, see the Fixed Rows topic.

Example

The code sample below illustrates how to implement vertical scrolling within the VerticalGrid extension.

Partial View code:

Razor

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

    settings.KeyFieldName = "EmployeeID";
    settings.Rows.Add("LastName");
    settings.Rows.Add("FirstName");
    settings.Rows.Add("Title");
    settings.Rows.Add("TitleOfCourtesy");
    settings.Rows.Add("BirthDate");
    settings.Rows.Add("HireDate");
    settings.Rows.Add("Address");
    settings.Rows.Add("City");
    settings.Rows.Add("Region");
    settings.Rows.Add("PostalCode");
    settings.Rows.Add("Country");
    settings.Rows.Add("HomePhone");
    settings.Rows.Add("Extension");

    // Enable vertical scrolling.
    settings.Settings.VerticalScrollBarMode = ScrollBarMode.Visible;
    settings.Settings.VerticalScrollableHeight = 200;
}).Bind(Model).GetHtml()