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:

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

3. Configure the detail descriptor:

   1. Create a data template that renders GridControl details. Note that the detail descriptor’s data context is the master row’s bound object.
   2. Assign the content template to the DetailDescriptorBase.ContentTemplate property.

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

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.