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.