[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
   [Collapse]Get Started With Data Grid and Views
     [Expand]Appearance and Conditional Formatting
     [Expand]Data Editing
     [Expand]Hit Information
     [Expand]Data Binding and Working with Columns
     [Expand]Grid View - Columns, Rows and Cells
     [Expand]Banded Views
     [Expand]WinExplorer View
     [Expand]Tile View
     [Expand]Filter and Search
     [Collapse]Split Presentation
       Tutorial: Split View Presentation
     [Expand]Row Preview Sections
   [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
   [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 (Learn more)

Tutorial: Split View Presentation

This walkthrough is a transcript of the Split View Presentation video available on the DevExpress YouTube Channel.

The tutorial covers the Split Presentation feature inspired by Microsoft Excel. It allows you to split the grid into two independently scrollable panes. You can split the grid vertically and thus edit the last grid row in one pane, while simultaneously looking at the first grid row in another pane. Same applies to columns when the View is split horizontally. This can help end-users browse and analyze data with many columns or rows.

Expanded Starting Point

Begin with a sample application with its Data Grid connected to a sample Microsoft AdventureWorks database – a large database with many records and data fields. Such a layout can benefit from using split view presentation.

Expanded Creating Grid Split Container

One way to enable this feature is to drop the GridSplitContainer control onto the form instead of the GridControl. This would create a grid control within the split container with all required settings.

Since the form already has a grid in it, invoke the grid control's smart-tag and click the Add Split Container link.

You won't notice the changes at design time, but your grid is now placed into a split container and you can split it into two regions. Before you proceed, go the grid View's properties, the GridView.OptionsMenu section. Make sure that the GridOptionsMenu.ShowSplitItem property is set to true.

Expanded Activating Split Presentation at Runtime

Run the application. Right-click the Group by Box and select Split from the context menu.

By default, a splitter divides the grid vertically. You can individually scroll each pane vertically. Horizontal scrolling affects both panes.

Expanded Enabling Horizontal Split Presentation

Return to design time, select the GridSplitContainer and change its GridSplitContainer.Horizontal property to true.

Now the Split menu item divides the grid into two panes horizontally. You can individually scroll each pane horizontally, while vertical scrolling is synchronized.

Expanded Split Presentation API

You can enable split presentation at application start-up or implement a custom UI element that would switch this mode on or off. This can be an item in the RibbonControl. To toggle the split View mode, call the GridSplitContainer's GridSplitContainer.ShowSplitView and GridSplitContainer.HideSplitView methods. Make sure to call GridSplitContainer.ShowSplitView in the Form's constructor so that the split container is automatically enabled at application startup.

One more thing you can do is scroll the second pane so that end-users don't see the same data in both sections. You'll need to access the secondary grid using the split container's GridSplitContainer.SplitChildGrid property. Then, obtain that grid's GridControl.MainView and set its GridView.TopRowIndex property.

Run the application. Now you see that on application start-up the primary grid displays first data rows as it did before, but the secondary grid is now scrolled down to the bottom.

Expanded Synchronization Settings

Notice that by default you are free to focus different data rows in each of the grid regions. You can change that by setting the GridSplitContainer.SynchronizeFocusedRow property to true.

Now focusing the row in one region will cause the other region to scroll up or down to this row and focus it as well.

You can also notice that horizontal scrolling affects both panes at once. To change this, set the GridSplitContainer.SynchronizeScrolling property to false. You can now scroll the two panes independently using their individual scroll bars.

Finally, any data shaping operations applied in one grid pane are reflected in the other pane. For instance, you can group data against a column and the same grouping will be applied to the other pane. Group row expand and collapse operations are also synchronized.

This behavior is controlled by the GridSplitContainer.SynchronizeViews and GridSplitContainer.SynchronizeExpandCollapse properties. Switch the GridSplitContainer.SynchronizeViews property to false. Now if you group data against a column, nothing happens in the other pane.

Expanded See Also

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