How to: Display Chart within Details

• Apr 15, 2018
• 2 minutes to read

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