Custom Content in Details

Dec 22, 2022
2 minutes to read

The GridControl allows you to display custom content in details. This topic describes how to use custom templates to display detail data.

View Example: Display Custom Content in Grid Details

Enable the Master-Detail Representation

You can use the ContentDetailDescriptor detail descriptor to display custom content in details. Follow the steps below to enable custom details:

Ensure that the master GridControl‘s TableView.AllowMasterDetail property is set to true (default value).
Assign the ContentDetailDescriptor detail descriptor to the GridControl.DetailDescriptor property.
Configure the detail descriptor:

The code sample below uses the ChartControl to visualize detail data:

XAML

xaml

<Window
    ...
    xmlns:dxg="http://schemas.devexpress.com/winfx/2008/xaml/grid"
    xmlns:dxc="http://schemas.devexpress.com/winfx/2008/xaml/charts">
    <Window.DataContext>
        <local:ViewModel/>
    </Window.DataContext>
    <Window.Resources>
        <DataTemplate x:Key="ordersChartTemplate">
            <dxc:ChartControl DataSource="{Binding Orders}">
                <dxc:ChartControl.Titles>
                    <dxc:Title Content="{Binding CompanyName}"/>
                </dxc:ChartControl.Titles>
                <dxc:XYDiagram2D>
                    <dxc:LineSeries2D DisplayName="Freight" 
                                      LabelsVisibility="False" 
                                      ArgumentDataMember="OrderDate" 
                                      ValueDataMember="Freight">
                    </dxc:LineSeries2D>
                </dxc:XYDiagram2D>
            </dxc:ChartControl>
        </DataTemplate>
    </Window.Resources>

    <dxg:GridControl ItemsSource="{Binding Customers}">
        <dxg:GridControl.DetailDescriptor>
            <dxg:ContentDetailDescriptor ContentTemplate="{StaticResource ordersChartTemplate}"/>
        </dxg:GridControl.DetailDescriptor>
        <!-- columns -->
    </dxg:GridControl>
</Window>

Display Custom Content in Row Details

You can also display custom content in the focused row details. To do this, create a template that renders custom content and assign it to the TableView.RowDetailsTemplate property.