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]Data Binding
   [Expand]Views
   [Expand]Data Editing and Validation
   [Expand]Grouping
   [Expand]Sorting
   [Expand]Filter and Search
   [Expand]Summaries
   [Expand]Focus and Selection Handling
    Formatting Cell Values
   [Collapse]Master-Detail Relationships
     Working with Master-Detail Relationships in Code
   [Expand]Asynchronous Image Load
   [Expand]Export and Printing
   [Expand]Appearance and Conditional Formatting
    Split Presentation
    Row Preview Sections
    Scrolling
   [Expand]Batch Modifications
   [Expand]Hit Information
    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]ASP.NET Core 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]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

Master-Detail Relationships

The Grid Control supports master-detail data presentation. This type of data representation requires the presence of at least two data tables - master and detail. These tables are linked by a one-to-many relationship, i.e., a single row in the first table can be related to one or more rows in the second table, but a row in the second table can be related to only one row in the first table. Master and detail tables are also called parent and child tables.

Expanded Get Started: Create a Data Grid with Master and Detail Views

Follow the Data Binding section tutorials to bind a Data Grid to the sample AdventureWorks2014 data base running on a local SQL server. When choosing database objects, select two tables associated with the same key (in the figure below, the "PurchaseOrderID" field links a child "PurchaseOrderDetail" table with a master "PurchaseOrderHeader" table) and use the master table as a Data Grid source.

Run the application and notice row expand/collapse buttons within each row. These buttons are disabled because the detail data is not yet loaded.

Drag a TableAdapter component associated with the detail data table from the Visual Studio toolbox and add the following code.

The Data Grid now displays both master and detail tables. Data from a detail table is shown in a View that is a copy of the master View (in the figure below, note how disabling the GridOptionsView.ShowGroupPanel setting for the master View leads to the detail View missing a group panel as well).

To replace this auto-generated detail View with your own, click the "Click here to create a new level" link in the Level Designer, then the "Retrieve Details" button. Finally, create a new View assigned to the detail level.

Demo: Master-Detail (standard)

Note

See the Working with Master-Detail Relationships in Code article to learn about other binding scenarios.

Expanded Patterns and Clones

Views that you assign to detail Data Grid levels are pattern Views. When a master row expands, the Data Grid dynamically creates a copy of a pattern View to display detail data. This copy is called a clone View. In the example above, "gridView2" is a pattern View whose clones display actual data at runtime.

Expanded Detail View Height

Use the BaseView.DetailHeight property to set the height of a detail View. For Layout Views, this property specifies the maximum allowed height, while Views automatically resize themselves to fit displayed cards.

Expanded Rename Detail Tabs

In the example above, the child View level changed its name from the default "Level 1" to "FK_PurchaseOrderDetail_PurchaseOrderHeader_PurchaseOrderID" after clicking the "Retrieve Details" button. This is a level name that must match the name of the master-detail relationship with which the View is associated. By default, tabs that contain detail Views have the same name and to rename them, use one of the following approaches:

Expanded Synchronize Clones

Enable the BaseView.SynchronizeClones property to synchronize all clone Views created from the same pattern View. When you group data, resize a column, or perform any other operation that changes the appearance of a clone View, same changes will also be applied to all detail clones, synchronized with this one.

Demo: Master-Detail (advanced)

Expanded Scroll Modes

Every View, whether it is a master or a clone View, has its own scroll bar by default (Classic mode). By utilizing the GridOptionsDetail.DetailMode property, you can switch to Embedded mode where only one master scroll bar is present.

Expanded Detail Tooltips

The Expand/collapse buttons for master rows can display detailed tooltips with clickable links inside them. End-users can utilize these links to open required clone Views, which is the only way to do that in cases where View tabs are hidden (the GridOptionsDetail.ShowDetailTabs property).

The GridOptionsDetail.EnableDetailToolTip option turns detail tooltips on or off.

Demo: Master-Detail (advanced)

Expanded Master-Detail Grouping

The GridOptionsView.ShowChildrenInGroupPanel property allows you to have one group panel for all master and detail Views.

This feature requires clone Views to be synchronized. The level name a group panel displays for clone View columns is specified by the GridView.ChildGridLevelName property.

Demo: Master-Detail Grouping

Expanded Zoom Details

If the GridOptionsDetail.AllowZoomDetail option is enabled, clone Views display the Zoom/Back button. By clicking it, end-users can maximize details for the current master row. If the master row has multiple related clone Views, they are placed inside tabs.

Related API

  • BaseView.ZoomView, BaseView.NormalView - call these methods to manually zoom Views in and out.

    The following example shows how to maximize the first detail View for the focused master row, process it, and then restore the layout.

  • GridControl.DefaultView - provides access to the currently maximized View. Matches the GridControl.MainView property value if no detail View is currently maximized.

    The following code handles the CTRL+Left Arrow/CTRL+Right Arrow to zoom detail Views in and out.

  • GridControl.DefaultViewChanged - fires upon zooming detail Views.

Demo: Master-Detail (advanced)

Expanded Master-Detail Mode Limitations

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