Custom Content in Details
- 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.
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:
- Create a data template that renders GridControl details. Note that the detail descriptor’s data context is the master row’s bound object.
- Assign the content template to the DetailDescriptorBase.ContentTemplate property.
The code sample below uses the ChartControl to visualize detail data:
<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.
See Also