datagrid height issue in nested datagrid( when using three data grid)

Question

i have a nested datagrid(which is of three data grid). here i am able to show data with no issue.

the first datagrid has 5 rows the main problem that comes here is when you click any row in first datagrid i show 2 datagrid( which has 10 rows)

lets say i click 3 row in 2 data grid. it show further records in third datagrid. again when i click 5 row in 2 data grid it show further records in third datagrid. now all the recods are shown fine

when u try to collpase the 3 row in 2 data grid it collpase but the issue is the height what the third datagrid which took space for showing the records( we can see a blank space showing between the main 2 datagrid and third data grid)

in every grid first column i have an button where i am writing this code for expand and collpase

this is the functionality i am implementing in all the datagrid button where i do expand collpase.

hope my question is clear . any help would great

xaml page

 <sdk:DataGrid MinHeight="100" x:Name="dgStudent "  Width="300" SelectionMode="Extended"   RowDetailsVisibilityMode="VisibleWhenSelected" >
             <sdk:DataGrid.Columns >
                <sdk:DataGridTemplateColumn >
                    <sdk:DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <Button x:Name="btn"   
                            Click="btn1_Click"  >
                            </Button>
                        </DataTemplate>
                    </sdk:DataGridTemplateColumn.CellTemplate>
                </sdk:DataGridTemplateColumn>
               
                <sdk:DataGridTemplateColumn  Header="ID"  Width="100" >
                    <sdk:DataGridTemplateColumn.CellTemplate >
                        <DataTemplate >
                            <sdk:Label Content="{Binding ID}" />
                        </DataTemplate>
                    </sdk:DataGridTemplateColumn.CellTemplate>
                </sdk:DataGridTemplateColumn>
                <sdk:DataGridTemplateColumn  Header="Name"  Width="100" >
                    <sdk:DataGridTemplateColumn.CellTemplate>
                        <DataTemplate >
                                <sdk:Label Content="{Binding Name}"  />
                        </DataTemplate>
                    </sdk:DataGridTemplateColumn.CellTemplate>
                </sdk:DataGridTemplateColumn>
            </sdk:DataGrid.Columns>
 <sdk:DataGrid.RowDetailsTemplate>
                <DataTemplate>
                    <StackPanel  x:Name="spCollege"   Width="300">
                        <sdk:DataGrid x:Name="dgCollege" Width="290" SelectionMode="Extended"   RowDetailsVisibilityMode="VisibleWhenSelected"  HeadersVisibility ="None" >
                            <sdk:DataGrid.Columns>
                                <sdk:DataGridTemplateColumn >
                                    <sdk:DataGridTemplateColumn.CellTemplate >
                                        <DataTemplate>                                     
                                            <Button x:Name="btn2"   
                            Click="btn3_Click">              
                                            </Button>
                                          
                                        </DataTemplate>
                                    </sdk:DataGridTemplateColumn.CellTemplate>
                                </sdk:DataGridTemplateColumn>
                                <sdk:DataGridTemplateColumn  Header="College"   Text="{Binding College}" >                                                         
                                <sdk:DataGridTemplateColumn  Header="Subjects"  Text="{Binding Subjects}" >                           
                            </sdk:DataGrid.Columns>
<sdk:DataGrid.RowDetailsTemplate>
                                <DataTemplate>
                                    <StackPanel x:Name="spSchool" Width="300"  >
                                        <sdk:DataGrid x:Name="dgSchool"   Width="280"   SelectionMode="Extended"   RowDetailsVisibilityMode="VisibleWhenSelected"  HeadersVisibility ="None">
                                            <sdk:DataGrid.Columns>
                                                <sdk:DataGridTemplateColumn  Width="24">
                                                    <sdk:DataGridTemplateColumn.CellTemplate>
                                                        <DataTemplate>

                                                            <Button x:Name="btn"  Height="15"  
                            Click="btn3_Click">

                                                            </Button>
                                                        
                                                        </DataTemplate>
                                                    </sdk:DataGridTemplateColumn.CellTemplate>
                                                </sdk:DataGridTemplateColumn>
                                                
                <sdk:DataGridTemplateColumn  Header="School"   Text="{Binding School}" >                                                         
                                <sdk:DataGridTemplateColumn  Header="Subjects"  Text="{Binding Subjects}" >   
                                            </sdk:DataGrid.Columns>

                                        </sdk:DataGrid>
                                    </StackPanel>
                                </DataTemplate>
                            </sdk:DataGrid.RowDetailsTemplate>
                        </sdk:DataGrid>

---

 private void btn1_Click(object sender, RoutedEventArgs e)
        {
            try
            {
                Button btnExpandCollapse = sender as Button;
                DependencyObject dep = (DependencyObject)e.OriginalSource;
               while ((dep != null) && !(dep is DataGridRow))
                {
                    dep = VisualTreeHelper.GetParent(dep);
                }
                // if we found the clicked row 
                if (dep != null && dep is DataGridRow)
                {
                    DataGridRow row = (DataGridRow)dep;
                    // change the details visibility 
                    if (row.DetailsVisibility == Visibility.Collapsed)
                    {
                        row.DetailsVisibility = Visibility.Visible;
                    }
                    else
                    {
                        row.DetailsVisibility = Visibility.Collapsed;
                        }
                    }
                }
            
            catch (System.Exception)
            {
            }
        }
---------------------------------------
2 datagrid
private void btn2_Click(object sender, RoutedEventArgs e)
        {
            try
            {
                Button btnExpandCollapse = sender as Button;
                DependencyObject dep = (DependencyObject)e.OriginalSource;
               while ((dep != null) && !(dep is DataGridRow))
                {
                    dep = VisualTreeHelper.GetParent(dep);
                }
                if (dep != null && dep is DataGridRow)
                {
                    DataGridRow row = (DataGridRow)dep;
                    // change the details visibility 
                    if (row.DetailsVisibility == Visibility.Collapsed)
                    {
                        row.DetailsVisibility = Visibility.Visible;
                    }
                    else
                    {
                        row.DetailsVisibility = Visibility.Collapsed;
                        }
                    }
                }
            
            catch (System.Exception)
            {
            }
        }
 -----------------
3 datagrid
private void btn1_Click(object sender, RoutedEventArgs e)
        {
            try
            {
                Button btnExpandCollapse = sender as Button;
                DependencyObject dep = (DependencyObject)e.OriginalSource;
               while ((dep != null) && !(dep is DataGridRow))
                {
                    dep = VisualTreeHelper.GetParent(dep);
                }
                // if we found the clicked row 
                if (dep != null && dep is DataGridRow)
                {
                    DataGridRow row = (DataGridRow)dep;
                    // change the details visibility 
                    if (row.DetailsVisibility == Visibility.Collapsed)
                    {
                        row.DetailsVisibility = Visibility.Visible;
                    }
                    else
                    {
                       row.DetailsVisibility = Visibility.Collapsed;
                        }
                    }
                }
            
            catch (System.Exception)
            {
            }
        }

Answer 1

Look at solution here: Resize Datagrid Height after deselecting a RowDetailsTemplate

Answer 2

This is apparently a bug in the SL grid. I was able to get around it by quickly closing and reopening the parent RowDetailsTemplate after the the user collapses a row in the second-level grid:

void secondLevelGrid_RowDetailsVisibilityChanged(object sender, DataGridRowDetailsEventArgs e)
{
    if (e.Row.DetailsVisibility == Visibility.Visible) return;

    var parentRow = this.GetVisualAncestors().OfType<DataGridRow>().FirstOrDefault();
    parentRow.DetailsVisibility = Visibility.Collapsed;

    var timer = new DispatcherTimer() { Interval = new TimeSpan(0, 0, 0, 0, 200) };
    timer.Tick += (ts, te) =>
                      {
                          Dispatcher.BeginInvoke(() => parentRow.DetailsVisibility = Visibility.Visible);
                          timer.Stop();
                      };
    timer.Start();
}

When the parent row reopens, the correct row in the second-level grid is still selected, so visually this creates a fairly seamless experience.