[Expand]General Information
[Collapse]WinForms Controls
  .NET Core Support
 [Expand]What's Installed
 [Expand]Build an Application
 [Collapse]Controls and Libraries
  [Expand]Forms and User Controls
  [Expand]Messages, Notifications, and Dialogs
  [Expand]Editors and Simple Controls
  [Expand]Ribbon, Bars and Menu
  [Expand]Application UI Manager
  [Expand]Docking Library
  [Collapse]Data Grid
   [Expand]Get Started With Data Grid and Views
   [Expand]Data Binding
    Unbound Columns
   [Expand]Data Editing and Validation
   [Expand]Filter and Search
   [Expand]Focus and Selection Handling
    Format Cell Values
   [Expand]Master-Detail Relationships
   [Expand]Asynchronous Image Load
   [Expand]Export and Printing
   [Expand]Appearance and Conditional Formatting
    Split Presentation
    Row Preview Sections
     Infinite Scrolling
     Scrollbar Annotations
   [Expand]Batch Modifications
    Hit Information
    Popup Menus
   [Expand]Save and Restore Layout
   [Expand]Visual Elements
   [Expand]Design-Time Features
   [Expand]End-User Capabilities
    Included Components
  [Expand]Vertical Grid
  [Expand]Property Grid
  [Expand]Pivot Grid
  [Expand]Tree List
  [Expand]Gantt Control
  [Expand]Chart Control
  [Expand]Map Control
  [Expand]Rich Text Editor
  [Expand]Spell Checker
  [Expand]Form Layout Managers
  [Expand]Navigation Controls
  [Expand]PDF Viewer
  [Expand]TreeMap Control
  [Expand]Sunburst Control
 [Expand]Common Features
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Report and Dashboard Server
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com


This walkthrough is a transcript of the Row Scrolling video available on the DevExpress YouTube Channel.

In this tutorial, you will learn about the various vertical scrolling modes in a grid View, including the following:

  • The default scrolling mode when the View is scrolled one row at a time;
  • Pixel scrolling mode that provides a smooth View scrolling experience;
  • Touch scrolling mode.
  • Postponed scrolling and target indication using vertical scrolling tooltips.

The tutorial will also describe the API that you can use to scroll the View or respond to end-user scrolling operations.

Expanded Default Scrolling Mode

When you scroll the View vertically, you can notice how the first row in the View is always fully displayed. In other words, the default scrolling step is one row. The same happens when you group data. The View is scrolled one row at a time.

Expanded Pixel Scrolling Mode

To enable pixel scrolling, access the grid View's properties, expand GridView.OptionsBehavior and set GridOptionsBehavior.AllowPixelScrolling to true.

Run the application now to see that scrolling is now smooth thus allowing for rows to be partially visible. The same happens with the grouped View.

Expanded Vertical Scrollbar Visibility

Now notice that if you collapse all group rows, the vertical scrollbar automatically disappears as it's no longer needed. The behavior is also customizable. Set the View's GridView.VertScrollVisibility property to ScrollVisibility.Always to reserve space for the scrollbar even if scrolling is not required.

This is a classic scrollbar representation and many modern applications use a touch-enabled scrollbar version.

Expanded Touch Scrolling Mode

To change the scrollbar style, go to code, make sure to reference the XtraEditors namespace and then set the WindowsFormsSettings.ScrollUIMode option to ScrollUIMode.Touch in the Form's constructor.

This mode implies that you scroll using gestures, and the scrollbar simply indicates the current position and then automatically fades out. If you are using the mouse, it will also appear when the pointer moves over the grid so you can scroll the grid by dragging the scrollbar thumb too.

Expanded Horizontal Scrolling

If the GridOptionsView.ColumnAutoWidth setting is disabled, Grid columns can occupy more space than the control provides. In these cases, a horizontal scroll bar appears. You can use the following settings to modify this scroll bar and/or manually scroll the View.

Expanded Postponed Scrolling Mode

The next thing to try is postponed vertical scrolling. First, disable pixel scrolling and then remove the ScrollStyleFlags.LiveVertScroll flag from the GridView.ScrollStyle property value.

In this mode, the View is updated only after you have released the scrollbar thumb. While you are still scrolling, a tooltip indicates the target position. If the View is grouped, tooltips will display group row values along with data row indexes.

In the grid View's properties, set the GridView.VertScrollTipFieldName property to Name.

Now the data row tooltip will show values from the specified field instead of record indexes.

Expanded Responding to End-User Scrolling Operations

Now take a look at vertical scrolling API. The code will update the status bar with the current price range every time you scroll the View.

Return to design time, access grid View events and handle the GridView.TopRowChanged event, which fires when the View is scrolled vertically. The handler simply calls the UpdateStatus method, which is also called in Form's Load handler.

The method first obtains the top visible row's handle by converting from the current top visible index. Then, use this row handle as a parameter when obtaining the price in that top row. Similarly, obtain the price value in the bottom row. To get the bottom row's handle, call a separate method.

In that method, enumerate visible indexes starting with the top visible index and stop the cycle if the index goes up to the GridView.RowCount value indicating that you've reached the last visible row. In the cycle body, use the GridView.IsRowVisible method to determine whether the currently processed row is within the grid's visible area. Quit the enumeration if you reach a row that's below the current scroll range. The row handle where the cycle stopped specifies the last visible row and thus it is the method's return value.

Finally, in the UpdateStatus method change the scrollbar text to display the two price values – form the top and bottom rows.

Run the application. Enable the live scrolling mode again to see status bar text change while you're scrolling.

Expanded Scrolling the View in Code

Now create three button titles Make Row Visible, Move Focus and Change Top Row to explore different ways of scrolling the view in code.

The first handler will use the GridView.MakeRowVisible method to scroll to the last data row in the View. The second simply sets focus to the same row using the ColumnView.FocusedRowHandle property. The third handler uses the GridView.TopRowIndex property to try and scroll the View to the last visible row.

When you run the application you'll see that all three methods will scroll the View to the bottom.

Expanded See Also

Is this topic helpful?​​​​​​​