How to collapse the last selected row in DataGrid after selecting a new one?

Question

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>

Answer 1

One solution I came up with is to set SelectedIndex = -1 for the inner DataGrid when a new row is selected on the outer DataGrid. What SelectedIndex = -1 does is basically unselecting which will do that job. If you have a 5-layer nested DataGrid, you will need 5 integers to track all the SelectedIndex for each layer.

It is like this:

<DataGrid ItemsSource="{Binding Students}" SelectedIndex="{Binding SelectedStudentIndex,Mode=TwoWay}" AutoGenerateColumns="False">
            <DataGrid.Columns>
                <DataGridTextColumn Header="Name" Binding="{Binding Name}"/>
            </DataGrid.Columns>
            <DataGrid.RowDetailsTemplate>
                <DataTemplate>
                    <DataGrid ItemsSource="{Binding Teachers}" SelectedIndex="{Binding DataContext.SelectedTeacherIndex,ElementName=dataGrid1,Mode=TwoWay}" IsReadOnly="True" AutoGenerateColumns="False">
                        <DataGrid.Columns>
                            <DataGridTextColumn Header="Name" Binding="{Binding Name}"/>
                        </DataGrid.Columns>
                        <DataGrid.RowDetailsTemplate>
                            <DataTemplate>
                                <!-- Something here -->
                            </DataTemplate>
                        </DataGrid.RowDetailsTemplate>
                    </DataGrid>
                </DataTemplate>
            </DataGrid.RowDetailsTemplate>
        </DataGrid>

In this case, you just need to set SelectedIndex = -1 in your view model whenever you want to unselect a data grid row.