WPF Grid: Master-Detail Support

Uploaded by DeveloperExpress on 02.07.2012

Welcome to the DevExpress Learn Now series. Quick tutorials to help you get started using
DevExpress Controls. One of the latest additions in the DXperience
12.1 release is the ability to show a master-detail hierarchy within our WPF grid.
In this video we’ll go over the steps on how to set this up.
The grid will display data from the Categories and Products tables of the standard Northwind
database installed into SQL Express. So let’s get started.
We’ll start by creating a new project and choosing the DXperience 12.1 WPF Application
from the startup menu. The project wizard opens. Here we’ll deselect
any unnecessary controls and make sure to select the Data Grid with Table Layout. Click
Create Project to complete the wizard. Let's remove an unnecessary column from XAML
markup and run the application to see what is present initially. We see a simple grid
populated with some test data. Let's return to Visual Studio and start the
Data Source Configuration Wizard by selecting "Data | Add New Data Source...".
We’ll choose database as our Data Source Type and click Next.
Select the Entity Data Model, and generate it from the database.
Specify the connection string to the Northwind database. Here, we’ll make note of the automatically
generated Entity Data Model name, as we’ll need it later to specify the grid's data source.
Let’s select Categories and Products tables. These are what we’ll use to set up master-detail
hierarchy. Click Finish and we see the Data Model Designer
where you notice the Products navigation property connecting two entities. We’ll need this
property name later when specifying data binding for the detail grid.
Let’s switch to the designer and modify grid control's properties.
First, let's get rid of the test data by resetting the ItemsSource property value. Then assign
a Name to the grid control so we can reference it later in code to assign a new data source.
Set the DetailDescriptor property to DataControlDetailDescriptor so that the detail is represented by another
grid control. You'll need to initialize the descriptor's DataControl property as well.
Let’s also set it to automatically populate the columns. Finally, specify the detail data
connection using the ItemsSourcePath property that should be set to Products - the name
of the navigation property that was generated when setting up the grid's data source.
Switch to the code view and write the following code line within 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. We can now run the application to see the
GridControl displaying master-detail data. Detail data will be represented with a grid
control. Now let’s add a second detail that will
display the same data using a Chart Control. The two details will be placed within a tabbed
container so that end-users can easily switch between them.
These steps are best done in XAML. Add TabViewDetailDescriptor and its DetailDescriptors property tags to
code and move the previously created detail grid into it.
We’ll copy and paste. Then we can review these changes in the Properties
window. The grid’s DetailDescriptor property is now set to the newly declared Tabbed Descriptor
and you can access it’s child descriptor collection editor. In the collection editor
window, add another detail – ContentDetailDescriptor. This detail type is specially designed to
display any custom control within details. Once the second detail has been added, initialize
its ContentTemplate property that will point to a DataTemplate with a chart control in
it. Review the chart control’s code. Make sure
that the chart control is bound to data via the Products navigation property, much like
the grid control detail. The 2D bar diagram will display Unit Price values for different
products. So, if we run the application now, we’ll
see how each master row has two details within a tabbed container. The only issue is that
tab headers are empty, so we should specify their content.
For ContentDetailDescriptor, the tab content is specified via the HeaderContent property.
For detail grids it’s not as straightforward, because the tab name also identifies the grid
within the Group Panel, Filter Panel and so on. So we’ll need to specify the detail
View’s DetailHeaderContent property. Once all properties are set, we can run the application
and we’ll see that our tabs are now filled with the appropriate content. Thanks for watching.
Let’s see what develops.