I have a multi-layer nested DataGrid
.
This is when nothing is selected:
This is when I click the first row. It expands the row detail:
This is when I click the first row in the row detail:
Then I click the second row of the outer DataGrid:
If I click the first row now, row detail of both levels are displayed (because it was previously selected):
Is there a way to make sure when I click a new row, all the row detail of the previous selected row will be collapsed? In this example it is a 3 layer nested DataGrid. It could have more layers.
My code looks something like this:
<DataGrid x:Name="dataGrid1" ItemsSource="{Binding Students}" AutoGenerateColumns="False" IsReadOnly="True" HeadersVisibility="Column" Background="DarkBlue">
<DataGrid.Columns>
<DataGridTextColumn Header="Name" Binding="{Binding Name}"/>
<DataGridTextColumn Header="ID" Binding="{Binding ID}"/>
<DataGridTextColumn Header="School" Binding="{Binding School}"/>
</DataGrid.Columns>
<DataGrid.RowDetailsTemplate>
<DataTemplate>
<DataGrid x:Name="nestedDataGrid1" ItemsSource="{Binding Teachers}" IsReadOnly="True" AutoGenerateColumns="False" HeadersVisibility="Column" Background="DarkRed">
<DataGrid.Columns>
<DataGridTextColumn Header="Name" Binding="{Binding Name}"/>
<DataGridTextColumn Header="ID" Binding="{Binding ID}"/>
</DataGrid.Columns>
<DataGrid.RowDetailsTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock Text="Line 1" FontSize="30"/>
<TextBlock Text="Line 2" FontSize="30"/>
<TextBlock Text="Line 3" FontSize="30"/>
<TextBlock Text="Line 4" FontSize="30"/>
<TextBlock Text="Line 5" FontSize="30"/>
</StackPanel>
</DataTemplate>
</DataGrid.RowDetailsTemplate>
</DataGrid>
</DataTemplate>
</DataGrid.RowDetailsTemplate>
</DataGrid>