Skip to main content

DevExpress v25.1 Update — Your Feedback Matters

Our What's New in v25.1 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

Scrolling

  • 3 minutes to read

The GridView and descendant views support the following vertical scrolling modes:

  • Per-row scrolling (default)
  • Smooth pixel scrolling
  • Touch-friendly scrolling
  • Postponed scrolling

#Per-Row Scrolling (Default)

The GridView scrolls one row at a time. The top row remains fully visible during vertical scroll operations. This behavior also applies to grouped data.

Per-Row Scrolling - WinForms Data Grid, DevExpress

#Pixel Scrolling

Pixel scrolling enables smooth row transitions and partial row visibility. To activate this mode, set the GridView.OptionsBehavior.AllowPixelScrolling property to DefaultBoolean.True:

C#
// Enable pixel-based vertical scrolling.
gridView1.OptionsBehavior.AllowPixelScrolling = DevExpress.Utils.DefaultBoolean.True;

Pixel Scrolling - WinForms Data Grid, DevExpress

Note

When pixel scrolling is active:

#Touch Scrolling

Touch UI mode replaces the default scrollbar with a gesture-aware version. It shows the scrollbar only when interacting with the grid (for example, mouse hover or touch interaction).

To activate this mode, set the WindowsFormsSettings.ScrollUIMode property to ScrollUIMode.Touch in the form constructor:

using DevExpress.XtraEditors;

public Form1() {
    InitializeComponent();
    WindowsFormsSettings.ScrollUIMode = ScrollUIMode.Touch;
}

#Postponed Scrolling

Postponed scrolling delays view updates until the scrollbar thumb is released. Tooltips appear during scrolling to display the target position. For grouped views, these tooltips display group row values and row indices.

Postponed Scrolling - WinForms Data Grid, DevExpress

To activate this mode:

C#
// Enable postponed vertical scrolling.
gridView1.OptionsBehavior.AllowPixelScrolling = DevExpress.Utils.DefaultBoolean.False;
gridView1.ScrollStyle &= ~ScrollStyleFlags.LiveVertScroll;

Use the GridView.VertScrollTipFieldName property to specify the name of the data field to display its values in tooltips instead of row indices:

C#
// Display field values (for example, "OrderID") instead of row indices.
gridView1.VertScrollTipFieldName = "OrderID";

Postponed Scrolling and Custom Tooltips - WinForms Data Grid, DevExpress

#Scrollbar Visibility

Scrollbar Property Name
Vertical VertScrollVisibility
Horizontal HorzScrollVisibility

#Horizontal Scrolling

If the GridOptionsView.ColumnAutoWidth setting is disabled, columns may exceed the View’s width. In this case, a horizontal scrollbar appears. Use the following APIs to customize horizontal scrollbar behavior:

API

Description

WindowsFormsSettings.InvertHorizontalScrolling

Reverses swipe/wheel direction.

GridView.HorzScrollStep

Specifies scroll speed (in pixels).

GridView.MakeColumnVisible(GridColumn)

Scrolls horizontally to display the specified column within a view.

LeftCoord

Gets or sets the horizontal scroll offset.

LeftCoordChanged

Fires on horizontal scroll.

#Respond to User Scrolling

Handle the GridView.TopRowChanged event to respond to scrolling operations.

The following code snippet displays prices from the top and bottom visible rows in the View’s caption and updates it during vertical scrolling:

using DevExpress.XtraGrid.Views.Grid;
using DevExpress.XtraEditors;
using System;
using System.Collections.Generic;
using DevExpress.XtraGrid;

namespace DXApplication {
    public partial class Form1 : XtraForm {
        GridControl gridControl1;
        GridView gridView1;
        public Form1() {
            InitializeComponent();
            gridControl1 = new GridControl() {
                Dock = System.Windows.Forms.DockStyle.Fill,
                DataSource = DataHelper.GetData(100)
            };
            gridView1 = new GridView(gridControl1);
            gridView1.TopRowChanged += GridView1_TopRowChanged;

            gridControl1.MainView = gridView1;

            this.Controls.Add(gridControl1);
        }

        void GridView1_TopRowChanged(object sender, EventArgs e) {
            if(!gridView1.OptionsView.ShowViewCaption)
                gridView1.OptionsView.ShowViewCaption = true;
            UpdateCaption();
        }

        void UpdateCaption() {
            int topRowHandle = gridView1.GetVisibleRowHandle(gridView1.TopRowIndex);
            double topRowPrice = Convert.ToDouble(gridView1.GetRowCellValue(topRowHandle, gridView1.Columns["Price"]));
            double bottomRowPrice = Convert.ToDouble(gridView1.GetRowCellValue(GetLastVisibleRowHandle(), gridView1.Columns["Price"]));
            gridView1.ViewCaption = string.Format("Price range: {0:c0} - {1:C0}", topRowPrice, bottomRowPrice);
        }

        int GetLastVisibleRowHandle() {
            int rowHandle = 0;
            for (int visibleIndex = gridView1.TopRowIndex + 1; visibleIndex < gridView1.RowCount; visibleIndex++) {
                rowHandle = gridView1.GetVisibleRowHandle(visibleIndex);
                if (gridView1.IsRowVisible(rowHandle) == RowVisibleState.Hidden)
                    break;
            }
            return rowHandle - 1;
        }
    }

    public class DataItem {
        public string Name { get; set; }
        public double Price { get; set; }
    }

    public static class DataHelper {
        public static List<DataItem> GetData(int count) {
            List<DataItem> data = new List<DataItem>();
            for (int i = 0; i < count; i++) {
                data.Add(new DataItem() { Name = "Item " + i, Price = i * 10 });
            }
            return data;
        }
    }
}

#Programmatic Scrolling

Use the following APIs to scroll the View:

See Also