Tutorial: Split View Presentation

• Oct 29, 2020
• 4 minutes to read

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.

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.

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.

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.

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.

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.

C#

using DevExpress.XtraBars;
// ...
public Form1() {
    // ...
    gridSplitContainer1.ShowSplitView();
    ((GridView)gridSplitContainer1.SplitChildGrid.MainView).TopRowIndex = gridView1.RowCount - 11;
}

private void barToggleSwitchItem1_CheckedChanged(object sender, ItemClickEventArgs e) {
    BarToggleSwitchItem item = sender as BarToggleSwitchItem;
    if (item == null) return;
    if (item.Checked == false) gridSplitContainer1.HideSplitView();
    else gridSplitContainer1.ShowSplitView();
}

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.

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.