Custom Content in Details

• Jun 07, 2019

The GridControl supports displaying custom content in row details. This topic describes how to enable displaying detail data within custom data template.

Enabling the master-detail representation

Do the following to enable custom details:

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

3. Configure the detail descriptor:

   1. Create a data template that is used to render grid details. Note, that the detail descriptor’s data context is the master row’s bound object.
   2. Assign the content template to the DetailDescriptor’s DetailDescriptorBase.ContentTemplate property.

Example

The code sample below demonstrates how to visualize detail data using the ChartControl.

XAML

<Window 
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:MasterDetailCustomContent"
        xmlns:dxg="http://schemas.devexpress.com/winfx/2008/xaml/grid" 
        xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core"
        xmlns:dxc="http://schemas.devexpress.com/winfx/2008/xaml/charts"
        x:Class="MasterDetailCustomContent.MainWindow"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <dx:EntitySimpleDataSource x:Key="EntitySimpleDataSource" ContextType="{x:Type local:NORTHWNDEntities}" Path="Employees"/>
        <DataTemplate x:Key="ordersChartTemplate">
            <dxc:ChartControl DataSource="{Binding Orders}">
                <dxc:ChartControl.Titles>
                    <dxc:Title Content="{DXBinding 'FirstName + ` ` + LastName'}"/>
                </dxc:ChartControl.Titles>
                <dxc:XYDiagram2D>
                    <dxc:LineSeries2D DisplayName="Freight" LabelsVisibility="False" ArgumentDataMember="OrderDate" ValueDataMember="Freight">
                    </dxc:LineSeries2D>
                </dxc:XYDiagram2D>
            </dxc:ChartControl>
        </DataTemplate>
    </Window.Resources>
    <Grid>

        <dxg:GridControl AutoGenerateColumns="AddNew" ItemsSource="{Binding Data, Source={StaticResource EntitySimpleDataSource}}">
            <dxg:GridControl.DetailDescriptor>
                <dxg:ContentDetailDescriptor ContentTemplate="{StaticResource ordersChartTemplate}"/>
            </dxg:GridControl.DetailDescriptor>
        </dxg:GridControl>

    </Grid>
</Window>