How to: Display Chart within Details

  • 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.

<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>