Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[Expand]General Information
[Collapse]WinForms Controls
  Prerequisites
 [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]Getting Started
   [Expand]Binding to Data
   [Collapse]Grid View
    [Expand]Columns and Card Fields
    [Expand]Rows and Cards
    [Expand]Row, Column and Cell Access API
    [Collapse]Split Presentation
      Split Presentation Overview
      Tutorial: Split View Presentation
    [Expand]Cell Merging
    [Expand]Row Preview Sections
    [Expand]Scrolling
   [Expand]View Technology
   [Expand]Grouping
   [Expand]Sorting
   [Expand]Summaries
   [Expand]Data Editing
   [Expand]Filtering and Locating Rows
   [Expand]Focus and Selection Handling
   [Expand]Processing Rows
   [Expand]Formatting Cell Values
   [Expand]Master-Detail Relationships
   [Expand]Asynchronous Image Load
   [Expand]Export and Printing
   [Expand]Appearance and Conditional Formatting
   [Expand]Batch Modifications
   [Expand]Hit Information
   [Expand]Hints
   [Expand]Popup Menus
   [Expand]Saving and Restoring Layouts
   [Expand]Visual Elements
   [Expand]Design-Time Features
   [Expand]Examples
   [Expand]End-User Capabilities
    Included Components
  [Expand]Vertical Grid
  [Expand]Pivot Grid
  [Expand]Tree List
  [Expand]Chart Control
  [Expand]Diagrams
  [Expand]Gauges
  [Expand]Map Control
  [Expand]Scheduler
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]Spell Checker
  [Expand]Form Layout Managers
  [Expand]Navigation Controls
  [Expand]Printing-Exporting
  [Expand]PDF Viewer
   Reporting
  [Expand]Snap
  [Expand]TreeMap Control
 [Expand]Common Features
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Document Server
[Expand]Reporting
[Expand]Report Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

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

How would you rate this topic?​​​​​​​