Nested Datagrid working

Question

Hi Iam using a nested datagrid and following is its definition, Here is the screenshot of the output,

In above image , I have 2 datagrids. If I click on any row of outergrid , Corresponding innergrid is displayed. Now, Iam not getting how this event is handled and corresponding inner grid data is displayed.

This is the class structure to which Iam binding my datagrid,

class MyClass
    {
        public string Col1{ get; set; }
        public string Col2{ get; set; }
        public string Col3{ get; set; }
        public string Col4{ get; set; }
        public string Col5{ get; set; }
        public ObservableCollection<InnerObject> inner_object{ get; set; }
    }

class InnerObject
{
    public string EventName { get; set; }
    public string Date { get; set; }
    public string Time { get; set; }
    public string Message { get; set; }
    public int RIndex { get; set; }
}
<DataGrid
        x:Name="objDatagrid"
        ItemsSource="{Binding DataView}"
        CanUserAddRows="False"
        CanUserDeleteRows="False"
        AutoGenerateColumns="False"
        BorderBrush="Gray"
            >
            <DataGrid.RowStyle>
                <Style TargetType="{x:Type DataGridRow}">
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding TDate}" Value="">
                            <Setter Property="Visibility" Value="Collapsed"/>
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </DataGrid.RowStyle>
            <DataGrid.RowDetailsTemplate >
                <DataTemplate>


                        <DataGrid
            x:Name="objInnerDatagrid"
            IsReadOnly="True"
            ItemsSource="{Binding ElementName=objDatagrid, Path=SelectedItem.inner_object}"> 
                            <DataGrid.RowStyle>
<Style TargetType="{x:Type DataGridRow}">
                                    <Style.Triggers>
                                        <DataTrigger Binding="{Binding Date}" Value="">
                                            <Setter Property="Visibility" Value="Collapsed"/>
                                        </DataTrigger>
                                    </Style.Triggers>
                                </Style>
                            </DataGrid.RowStyle>
                            <DataGrid.Columns>
                            </DataGrid.Columns>
                        </DataGrid>
                </DataTemplate>
            </DataGrid.RowDetailsTemplate>
            <DataGrid.Columns>
                <DataGridTextColumn Header="Col1" Width="SizeToHeader" Binding="{Binding Col1}" IsReadOnly="True"/>
                <DataGridTextColumn Header="Col2" Width="80" Binding="{Binding Col2}" IsReadOnly="True"/>
                <DataGridTextColumn Header="Col3" Width="80" Binding="{Binding Col3}" IsReadOnly="True"/>
                <DataGridTextColumn Header="Col4" Width="120" Binding="{Binding Col4}" IsReadOnly="True"/>
                <DataGridTextColumn Header="Col5" Width="100" Binding="{Binding Col5}" IsReadOnly="True"/>
            </DataGrid.Columns>
        </DataGrid>

Iam a newbie to WPF. Can anyone please explain me the above code and its working ? It will be a great help. Thanks in advance.

Answer 1

As you can already see in your code the RowDetailsTemplate displays the inner grid. Default behavior of displaying the row details is when someone selects the parent row.

If you want this behavior to override (e.g. you want to show the details Data grid on double click or something) then you may have to do some code behind work ...

See this post for more details...

Show RowDetails on double-click in WPF DataGrid