[Expand]General Information
[Expand]WinForms Controls
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Collapse]WPF Controls
  Prerequisites
 [Expand]What's Installed
 [Expand].NET Core 3 Support
 [Expand]Common Concepts
 [Expand]MVVM Framework
 [Collapse]Controls and Libraries
   Reporting
  [Collapse]Data Grid
   [Collapse]Getting Started
     Lesson 1 - Adding GridControl to a Project
     Lesson 2 - Data Editing and Displaying
     Lesson 3 - Data Management
     Lesson 4 - Grid Summaries
     Lesson 5 - Setup Master-Detail Hierarchy
   [Expand]Implementation Details
   [Expand]Views
   [Expand]Grid View Data Layout
   [Expand]Binding to Data
   [Expand]Master-Detail Data Representation
   [Expand]Data Editing and Validation
   [Expand]Grouping
   [Expand]Filtering and Searching
   [Expand]Sorting
   [Expand]Data Summaries
   [Expand]Paging and Scrolling
   [Expand]Focus, Navigation, Selection
   [Expand]Drag-and-Drop
   [Expand]Conditional Formatting
   [Expand]Appearance Customization
   [Expand]MVVM Enhancements
   [Expand]Printing and Exporting
   [Expand]End-User Interaction
   [Expand]Miscellaneous
   [Expand]Performance Improvement
   [Expand]Design-Time Features
   [Expand]Visual Elements
   [Expand]End-User Capabilities
   [Expand]Examples
  [Expand]Ribbon, Bars and Menu
  [Expand]Charts Suite
  [Expand]Pivot Grid
  [Expand]Scheduler
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]Tree List
  [Expand]Gauge Controls
  [Expand]Map Control
  [Expand]Layout Management
  [Expand]Windows Modern UI
  [Expand]Printing-Exporting
  [Expand]Data Editors
  [Expand]Navigation Controls
  [Expand]Spell Checker
  [Expand]Property Grid
  [Expand]PDF Viewer
  [Expand]TreeMap Control
  [Expand]Gantt Control
  [Expand]Diagram Control
  [Expand]Windows and Utility Controls
   Dialogs, Notifications and Panels
  [Expand]Scheduler (legacy)
 [Expand]Scaffolding Wizard
 [Expand]Localization
  Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Reporting
[Expand]Report and Dashboard Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

Lesson 5 - Setup Master-Detail Hierarchy

This topic describes how to set up a master-detail hierarchy within a grid control. The grid displays data from the Northwind database's Categories and Products tables installed in SQL Express.

Expanded Create New Project

To create a new project, open Microsoft Visual Studio, and select File | New | Project... from the main menu. Select Visual C# in the Tree View and then select the Windows Classic Desktopchild node. Double-click the WPF App item on the right

Drag and drop the DevExpress Grid control from Visual Studio toolbox to the application form.

Expanded Create Data Source

Start the Entity Data Model Wizard by selecting Project | Add New Item as shown below.

Select Data | ADO.NET Entity Data Model on the following screen:

Specify the connection string to the Northwind database. Note the automatically generated Entity Data Model name (required when specifying the grid's data source).

In the next step, select the Categories and Products tables as shown below.

After clicking Finish, the Data Model Designer window invokes. In this window you can see one-to-many relationship connection between Product and Category tables.

Expanded Set Up the Grid Control via XAML

You can customize the grid by replacing its markup with the following code:

The following members are used in this code: GridControl.DetailDescriptor, DataControlDetailDescriptor.ItemsSourcePath, DataControlDetailDescriptor.DataControl.

If you have changed your XAML code to the snippet listed above, you can skip the next section and proceed to specify the grid's data source.

Expanded Set Up the Grid via the Visual Studio Designer

You can achieve the same markup as shown in the previous section by modifying the GridControl properties using the Visual Studio Designer. Follow the images below to complete the customization.

Note that the DataControlDetailDescriptor.ItemsSourcePath property is set to "Products" - the name of the navigation property that was generated when setting up the grid's data source.

Expanded Assign the Grid's Data Source

Switch to the code view and add the following code snippet in the MainWindow constructor:

Note that the NorthwindEntities class is initialized - this name was specified as the Data Model's name when creating the grid's data source.

Expanded Run the Application

You can now run the application to see the GridControl displaying master-detail data. Detail data is represented with a grid control as well.

Expanded See Also

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