Custom Content in Details
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:
- Ensure the master GridControl‘s TableView.AllowMasterDetail option is enabled (enabled by default).
- Provide the ContentDetailDescriptor detail descriptor to the grid’s GridControl.DetailDescriptor property.
Configure the detail descriptor:
- 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.
- 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.
<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>