Datagrid inside Datagrid RowDetailsTemplate

Question

I am trying to create the effect of having grouping in a datagrid without having to use the grouping that is available with the datagrid as that doesn't let me show the column values on the header rows unless I "fake it" and make all the columns myself which I've done previously. I have a working example where I can get a datagrid to populate with data inside another datagrid's rowdetailstemplate. My main question is that I notice the inner datagrid doesn't respect some of my properties, specifically the FrozenColumnCount which when I move the outer datagrid's scrollviewer the inner datagrid moves but has no frozen columns.

Here is some code and hopefully that will better demonstrate what I'm doing:

<DataGrid ItemsSource="{Binding DisplayRows}" AutoGenerateColumns="False" Grid.Row="1" FrozenColumnCount="1" >
        <DataGrid.RowDetailsTemplate >
            <DataTemplate>
                <DataGrid AutoGenerateColumns="False" FrozenColumnCount="1" ItemsSource="{Binding DataContext.DisplayRows, RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}">
                    <DataGrid.Columns>
                        <DataGridTextColumn Binding="{Binding Timestamp, StringFormat=\{0:MMM dd\, yyyy HH:mm\}}" Header="Timestamp" Width="113" />
                        <DataGridTextColumn Header="HE1" Binding="{Binding Hours[0], StringFormat=\{0:#\,##0\}}" Width="50">
                            <DataGridTextColumn.CellStyle>
                                <Style TargetType="{x:Type DataGridCell}">
                                    <Style.Setters>
                                        <Setter Property="Background" Value="{Binding Backgrounds[0]}" />
                                        <Setter Property="TextBlock.TextAlignment" Value="Right" />
                                        <Setter Property="HorizontalAlignment" Value="Stretch" />
                                    </Style.Setters>
                                </Style>
                            </DataGridTextColumn.CellStyle>
                        </DataGridTextColumn>
                    </DataGrid.Columns>
                </DataGrid>
            </DataTemplate>
        </DataGrid.RowDetailsTemplate>
        <DataGrid.Columns>
            <DataGridTextColumn Binding="{Binding Timestamp, StringFormat=\{0:MMM dd\, yyyy HH:mm\}}" Header="Timestamp" Width="120" />
            <DataGridTextColumn Header="HE1" Binding="{Binding Hours[0], StringFormat=\{0:#\,##0\}}" Width="50">
                <DataGridTextColumn.CellStyle>
                    <Style TargetType="{x:Type DataGridCell}">
                        <Style.Setters>
                            <Setter Property="Background" Value="{Binding Backgrounds[0]}" />
                            <Setter Property="TextBlock.TextAlignment" Value="Right" />
                            <Setter Property="HorizontalAlignment" Value="Stretch" />
                        </Style.Setters>
                    </Style>
                </DataGridTextColumn.CellStyle>
            </DataGridTextColumn>
         </DataGrid.Columns>
    </DataGrid>

My actual project has a lot more rows but this is the simplified xml. Here are some pictures to show the problem I'm talking about.

Hopefully someone can help me out with this. Thanks for the help.

Answer 1

I think the best way for the hierarchy datagrid use the approach of this article: http://blogs.perpetuumsoft.com/silverlight/how-to-turn-silverlight-datagrid-to-treegrid-in-15-minutes/