How to use Grid inside Grid (Nested Grid) on Devexpress tools in WPF

Question

I am stuck here that how i can use nested grid on devexpress grid control.I research alot but couldn't find anything good.Here is my

XAML

<dxdo:LayoutPanel Caption="Photography Jobs" AllowClose="False" Name="pnlShotoJobs" GotFocus="pnlShotoJobs_GotFocus">

                <my:GridControl Name="dgPhotoJobs" MouseDoubleClick="dgPhotoJobs_MouseDoubleClick">
                    <my:GridControl.Columns>
                        <my:GridColumn FieldName="JobName" Name="grdColumnJobName" />
                        <my:GridColumn FieldName="JobDate" Name="grdColumnJobDate" />

                    </my:GridControl.Columns>
                 <my:GridControl.View>

                        <my:TableView NavigationStyle="Row" ShowAutoFilterRow="True" ShowGroupPanel="False" MultiSelectMode="Row" Name="JobTableView" MouseUp="JobTableView_MouseUp" AllowEditing="False" Focusable="False">
                        </my:TableView>
                    </my:GridControl.View>
                </my:GridControl>
            </dxdo:LayoutPanel>

Design

When we click on any Photography Jobs then a new grid will open underneath that clicked row and have all the data that belongs to Primary key ID of clicked row. IF you have any code or any advice then please share it with me.

Thanks in advance.

Answer 1

To show a nested grid for your GridControl rows define DataRowTemplate. like this:

        <my:GridControl Name="dgPhotoJobs" MouseDoubleClick="dgPhotoJobs_MouseDoubleClick">
                        <my:GridControl.Columns>
                            <my:GridColumn FieldName="JobName" Name="grdColumnJobName" />
                            <my:GridColumn FieldName="JobDate" Name="grdColumnJobDate" />

                        </my:GridControl.Columns>
                     <my:GridControl.View>

                            <my:TableView NavigationStyle="Row" ShowAutoFilterRow="True" ShowGroupPanel="False" MultiSelectMode="Row" Name="JobTableView"  AllowEditing="False" Focusable="False">

     <dxg:TableView.DataRowTemplate>
                            <DataTemplate>
                                <StackPanel Orientation="Vertical">
                                    <core:MeasurePixelSnapper>
                                        <ContentPresenter ContentTemplate="{DynamicResource {dxgt:GridRowThemeKey ResourceKey=DataRowTemplate}}" Name="defaultRowPresenter" />
                                  </core:MeasurePixelSnapper>
                                    <core:DXExpander HorizontalExpand="None" IsExpanded="{Binding Path=(dxg:DataViewBase.IsFocusedRow), RelativeSource={RelativeSource TemplatedParent}}" VerticalExpand="FromTopToBottom">
                                        <Border Background="Cyan" BorderBrush="{DynamicResource {dxgt:GridRowThemeKey ResourceKey=GridDataRowDelimiterBrush}}" BorderThickness="0,1,0,0" TextElement.Foreground="Black">
                                            <Grid MaxHeight="400">
                                                <dxg:GridControl Grid.Row="1" AutoPopulateColumns="False" ItemsSource="{Binding Path=DataContext.MyCollection, UpdateSourceTrigger=PropertyChanged}" >
                                                    <dxg:GridControl.Columns>
                                                        <dxg:GridColumn  Header="Column1" FieldName="FieldName1" AllowEditing="False"/>
                                                        <dxg:GridColumn  Header="Column2" FieldName="FieldName2" AllowEditing="False">                                                                                                   
                                                    </dxg:GridControl.Columns>                                              
                                                </dxg:GridControl>
                                            </Grid>
                                        </Border>
                                    </core:DXExpander>
                                </StackPanel>
                            </DataTemplate>
     </dxg:TableView.DataRowTemplate>
                            </my:TableView>
                        </my:GridControl.View>
                    </my:GridControl>

here is my xml namespaces:

xmlns:dxg="http://schemas.devexpress.com/winfx/2008/xaml/grid"        

xmlns:dxgt="http://schemas.devexpress.com/winfx/2008/xaml/grid/themekeys"

xmlns:core="http://schemas.devexpress.com/winfx/2008/xaml/core"