DetailDescriptorBase.ContentTemplate Property

Gets or sets the template specifying the entire or partial content of a Detail.

Namespace: DevExpress.Xpf.Grid

Assembly: DevExpress.Xpf.Grid.v19.1.Core.dll

Declaration

C#

public DataTemplate ContentTemplate { get; set; }

VB.NET

Public Property ContentTemplate As DataTemplate

Property Value

Type	Description
DataTemplate	A DataTemplate object specifying the Detail section’s content.

Remarks

The DataContext for the specified template is the master record, so you can easily display additional information about the parent object.

ContentTemplate is mostly used with the ContentDetailDescriptor, since it is specially designed to define this Detail section’s content. This is how non-grid details are displayed within a master-detail GridControl.

When using a DataControlDetailDescriptor or a TabViewDetailDescriptor, ContentTemplate can also be used to display additional information above the Detail Data Control or above Tabs, as shown in the following image.

Example

This example demonstrates how to display a memo field and a ChartControl within grid details. While the memo field displays data from the master record, the chart control is bound to the detail data table.

Grid Controls in this sample use a TabViewDetailDescriptor with both ContentDetailDescriptor and DataControlDetailDescriptor showing the same custom content. This is done by assigning the same template to the detail descriptors’ DetailDescriptorBase.ContentTemplate properties. Note that when using a DataControlDetailDescriptor, the template is displayed above the detail grid.

Two grid controls are included in this sample to demonstrate how to setup custom details in either XAML or code.

Note

A complete sample project is available at https://github.com/DevExpress-Examples/displaying-chart-control-in-grid-details-e4042.

MainWindow.xaml

<Window.Resources>
    <DataTemplate x:Key="ContentDetail">
        <Grid Margin="10, 10, 10, 10">
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <StackPanel Orientation="Vertical" Grid.Column="0">
                <TextBlock><Bold>Notes:</Bold></TextBlock>
                <TextBlock Text="{Binding Path=Notes}" TextWrapping="Wrap" ></TextBlock>
            </StackPanel>
            <dxc:ChartControl DataSource="{Binding Path=Orders}" Grid.Column="1" Height="200" Margin="10, 10, 10, 10">
                <dxc:SimpleDiagram2D>
                    <dxc:SimpleDiagram2D.Series>
                        <dxc:PieSeries2D Name="PieSeries" ArgumentDataMember="Supplier" ValueDataMember="Quantity" LabelsVisibility="True">
                            <dxc:PieSeries2D.PointOptions>
                                <dxc:PointOptions>
                                    <dxc:PointOptions.ValueNumericOptions>
                                        <dxc:NumericOptions Format="Percent" Precision="0"/>
                                    </dxc:PointOptions.ValueNumericOptions>
                                </dxc:PointOptions>
                            </dxc:PieSeries2D.PointOptions>
                            <dxc:PieSeries2D.LegendPointOptions>
                                <dxc:PointOptions Pattern="{}{A}"/>
                            </dxc:PieSeries2D.LegendPointOptions>
                        </dxc:PieSeries2D>
                    </dxc:SimpleDiagram2D.Series>
                </dxc:SimpleDiagram2D>
                <dxc:ChartControl.Legend>
                    <dxc:Legend Visibility="Visible" > </dxc:Legend>
                </dxc:ChartControl.Legend>
            </dxc:ChartControl>
        </Grid>
    </DataTemplate>
</Window.Resources>
    <dxg:GridControl AutoGenerateColumns="AddNew" Name="gridControl1" Grid.Column="0" Grid.Row="0">
        <dxg:GridControl.View>
            <dxg:TableView Name="tableView1" ShowTotalSummary="True" AutoWidth="True" ShowGroupPanel="False"/>
        </dxg:GridControl.View>
        <dxg:GridControl.DetailDescriptor>
            <dxg:TabViewDetailDescriptor>
                <dxg:TabViewDetailDescriptor.DetailDescriptors>
                    <dxg:ContentDetailDescriptor ContentTemplate="{StaticResource ContentDetail}" HeaderContent="ContentDetailDescriptor">
                    </dxg:ContentDetailDescriptor>
                    <dxg:DataControlDetailDescriptor ContentTemplate="{StaticResource ContentDetail}" ItemsSourcePath="Orders"  x:Name="detail1">
                        <dxg:DataControlDetailDescriptor.DataControl>
                            <dxg:GridControl AutoGenerateColumns="AddNew">
                                <dxg:GridControl.View>
                                    <dxg:TableView AutoWidth="True" DetailHeaderContent="DataControlDetailDescriptor" ShowGroupPanel="False" />
                                </dxg:GridControl.View>
                            </dxg:GridControl>
                        </dxg:DataControlDetailDescriptor.DataControl>
                    </dxg:DataControlDetailDescriptor>
                </dxg:TabViewDetailDescriptor.DetailDescriptors>
            </dxg:TabViewDetailDescriptor>
        </dxg:GridControl.DetailDescriptor>
    </dxg:GridControl>

MainWindow.xaml.cs

private void Button_Click(object sender, RoutedEventArgs e)
{
    DataControlDetailDescriptor dataControlDetail = new DataControlDetailDescriptor();
    dataControlDetail.DataControl = SetupDetailGrid();
    dataControlDetail.ItemsSourcePath = "Orders";
    dataControlDetail.ContentTemplate = (DataTemplate)this.FindResource("ContentDetail");

    ContentDetailDescriptor contentDetail = new ContentDetailDescriptor();
    contentDetail.ContentTemplate = (DataTemplate)this.FindResource("ContentDetail");
    contentDetail.HeaderContentTemplate = (DataTemplate)this.FindResource("ContentDetail");
    contentDetail.HeaderContent = "ContentDetailDescriptor";

    TabViewDetailDescriptor tabDetail = new TabViewDetailDescriptor();
    tabDetail.DetailDescriptors.Add(contentDetail);
    tabDetail.DetailDescriptors.Add(dataControlDetail);

    gridControl2.DetailDescriptor = tabDetail;
}
private GridControl SetupDetailGrid()
{
    GridControl detailGrid = new GridControl();
    detailGrid.AutoGenerateColumns = AutoGenerateColumnsMode.AddNew;
    detailGrid.View = new TableView();
    (detailGrid.View as TableView).DetailHeaderContent = "DataControlDetailDescriptor";
    (detailGrid.View as TableView).ShowGroupPanel = false;
    (detailGrid.View as TableView).AutoWidth = true;
    return detailGrid;
}

MainWindow.xaml.vb

Private Sub Button_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
    Dim dataControlDetail As New DataControlDetailDescriptor()
    dataControlDetail.DataControl = SetupDetailGrid()
    dataControlDetail.ItemsSourcePath = "Orders"
    dataControlDetail.ContentTemplate = CType(Me.FindResource("ContentDetail"), DataTemplate)

    Dim contentDetail As New ContentDetailDescriptor()
    contentDetail.ContentTemplate = CType(Me.FindResource("ContentDetail"), DataTemplate)
    contentDetail.HeaderContentTemplate = CType(Me.FindResource("ContentDetail"), DataTemplate)
    contentDetail.HeaderContent = "ContentDetailDescriptor"

    Dim tabDetail As New TabViewDetailDescriptor()
    tabDetail.DetailDescriptors.Add(contentDetail)
    tabDetail.DetailDescriptors.Add(dataControlDetail)

    gridControl2.DetailDescriptor = tabDetail
End Sub
Private Function SetupDetailGrid() As GridControl
    Dim detailGrid As New GridControl()
    detailGrid.AutoGenerateColumns = AutoGenerateColumnsMode.AddNew
    detailGrid.View = New TableView()
    TryCast(detailGrid.View, TableView).DetailHeaderContent = "DataControlDetailDescriptor"
    TryCast(detailGrid.View, TableView).ShowGroupPanel = False
    TryCast(detailGrid.View, TableView).AutoWidth = True
    Return detailGrid
End Function

Related GitHub Examples

The following code snippets (auto-collected from DevExpress Examples) contain references to the ContentTemplate property.

Note

The algorithm used to collect these code examples remains a work in progress. Accordingly, the links and snippets below may produce inaccurate results. If you encounter an issue with code examples below, please use the feedback form on this page to report the issue.

C#

displaying-chart-control-in-grid-details-e4042/CS/WpfApplication19/MainWindow.xaml#L62

<dxg:TabViewDetailDescriptor.DetailDescriptors>
    <dxg:ContentDetailDescriptor ContentTemplate="{StaticResource ContentDetail}" HeaderContent="ContentDetailDescriptor">
    </dxg:ContentDetailDescriptor>

create-details-with-a-grid-and-custom-content-and-put-them-in-a-tabbed-container-e4031/CS/WpfApplication18/MainWindow.xaml#L36

</dxg:DataControlDetailDescriptor>
<dxg:ContentDetailDescriptor ContentTemplate="{StaticResource EmployeeNotes}" HeaderContent="Notes">
</dxg:ContentDetailDescriptor>

how-to-create-a-gridcontrol-detail-with-custom-content-t237942/VB/WpfApplication18/MainWindow.xaml#L22

<dxg:ContentDetailDescriptor  HeaderContent="Notes">
    <dxg:ContentDetailDescriptor.ContentTemplate>
        <DataTemplate >

how-to-synchronize-the-column-width-when-contentdetaildescriptor-is-used-e4823/CS/DXGrid.ColumnSync/MainWindow.xaml#L18

<dxg:ContentDetailDescriptor>
    <dxg:ContentDetailDescriptor.ContentTemplate>
        <DataTemplate>

how-to-create-master-detail-grid-via-templates-e4494/VB/Window1.xaml#L12

<dxg:ContentDetailDescriptor>
    <dxg:ContentDetailDescriptor.ContentTemplate>
        <DataTemplate>

VB.NET

displaying-chart-control-in-grid-details-e4042/VB/WpfApplication19/MainWindow.xaml.vb#L59

dataControlDetail.ItemsSourcePath = "Orders"
dataControlDetail.ContentTemplate = CType(Me.FindResource("ContentDetail"), DataTemplate)

create-details-with-a-grid-and-custom-content-and-put-them-in-a-tabbed-container-e4031/VB/WpfApplication18/MainWindow.xaml.vb#L60

Dim contentDetail As New ContentDetailDescriptor()
contentDetail.ContentTemplate = CType(FindResource("EmployeeNotes"), DataTemplate)
contentDetail.HeaderContent = "Notes"