Data Grid in Details

• Jun 20, 2018

The GridControl supports displaying row details data in a nested GridControl. This topic describes how to enable displaying detail data in a nested table.

Enabling the master-detail representation

Follow the steps below to enable details:

1. Ensure the master GridControl‘s TableView.AllowMasterDetail option is enabled (enabled by default).
2. Provide the DataControlDetailDescriptor detail descriptor to the grid’s GridControl.DetailDescriptor property.

3. Configure the detail descriptor:

   1. Provide a data source for the detail grid by specifying the DataControlDetailDescriptor.ItemsSourceBinding property. Note, that the detail descriptor’s data context is the master row bound object.
   2. Assign an instance of the GridControl class to the DataControlDetailDescriptor.DataControl property. This instance of GridControl is used as a factory to generate detail grids. Detail grids are built in the master GridControl’s visual tree.

Example

The code sample below demonstrates how to display detail data in a nested GridControl.

XAML

<Window 
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:MasterDetailDemo"
        xmlns:dxg="http://schemas.devexpress.com/winfx/2008/xaml/grid" 
        xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core" 
        x:Class="MasterDetailDemo.MainWindow"
        Title="Main Window">
    <Window.Resources>
        <dx:EntitySimpleDataSource x:Key="EntitySimpleDataSource" ContextType="{x:Type local:NORTHWNDEntities}" Path="Categories"/>
    </Window.Resources>
    <Grid>
        <dxg:GridControl AutoGenerateColumns="AddNew" ItemsSource="{Binding Data, Source={StaticResource EntitySimpleDataSource}}">
            <dxg:GridControl.DetailDescriptor>
                <dxg:DataControlDetailDescriptor ItemsSourceBinding="{Binding Products}">
                    <dxg:GridControl AutoGenerateColumns="AddNew"/>
                </dxg:DataControlDetailDescriptor>
            </dxg:GridControl.DetailDescriptor>
        </dxg:GridControl>
    </Grid>
</Window>