[Solved] How to bind my MVVM to a RowDetailsTemplate?

[Rob Ainscough]

I'm trying to bind my RowDetailsTemplate to my MVVM and I'm not having much success (click on my Row details + button and I just get and empty grid).

My basic approach is this:

App.xaml contains the definition of my RowDetailsTemplate

<DataTemplate x:Key="TransactionDetailDataTemplate">
    <Grid MinHeight="28" Style="{StaticResource DCRowDetailBackground}">

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="410"/>
            <ColumnDefinition Width="85"/>
            <ColumnDefinition Width="60"/>
            <ColumnDefinition Width="230"/>
        </Grid.ColumnDefinitions>

        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <telerik:RadGridView x:Name="TransactionDetailGridView" Margin="0" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="4" FontSize="10.667" AreRowDetailsFrozen="True" AutoGenerateColumns="False" CanUserFreezeColumns="False" CanUserReorderColumns="False" CanUserResizeColumns="False" CanUserSortColumns="False" RowIndicatorVisibility="Collapsed" IsReadOnly="False" ShowGroupPanel="False"
                                ItemsSource="{Binding Path=Transactions.TransactionDetails}"
                                RowDetailsTemplate="{StaticResource TransactionDetailDataTemplate}">
            <telerik:RadGridView.Columns>
                <telerik:GridViewToggleRowDetailsColumn />
                <telerik:GridViewDataColumn Header="TransactionID" IsVisible="False" DataMemberBinding="{Binding TransactionID}" />
                <telerik:GridViewDataColumn Header="TransactionID" IsVisible="False" DataMemberBinding="{Binding TransactionDetailID}" />
                <telerik:GridViewDataColumn Header="UnitID" IsVisible="False" DataMemberBinding="{Binding UnitID}" />
                <telerik:GridViewDataColumn Header="Unit" Width="80"  DataMemberBinding="{Binding UnitMask}" />
                <telerik:GridViewDataColumn Header="Description" Width="113" DataMemberBinding="{Binding Description}" />
                <telerik:GridViewDataColumn Header="From" Width="65" DataMemberBinding="{Binding TransactionFromDate, Converter={StaticResource shortDateConverter}}" />
                <telerik:GridViewDataColumn Header="To" Width="65" DataMemberBinding="{Binding TransactionToDate, Converter={StaticResource shortDateConverter}}" />
                <telerik:GridViewDataColumn Header="Amt." Width="60" TextAlignment="Right" DataMemberBinding="{Binding TransactionAmount, StringFormat=\{0:C2\}}" />
                <telerik:GridViewDataColumn Header="Type" Width="113" DataMemberBinding="{Binding TransactionLinkDescription}" />
            </telerik:RadGridView.Columns>
        </telerik:RadGridView>

    </Grid>
</DataTemplate>

Here is the UserControl with the RadGridView that uses the RowDetailsTemplate:

<UserControl x:Class="DCApp.DCTransactionDetailsGrid"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
    xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
    xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit"
    xmlns:DC="clr-namespace:DCApp"
    xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
    xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions">

    <UserControl.FontFamily>
        <StaticResource ResourceKey="DCTextNormal"/>
    </UserControl.FontFamily>
    <UserControl.FontSize>
        <StaticResource ResourceKey="DCTextSizeNormal"/>
    </UserControl.FontSize>

    <Grid x:Name="TransactionDetailsGrid">

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>

        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <telerik:RadGridView x:Name="TransactionGridView" Margin="0" FontSize="10.667" AreRowDetailsFrozen="True" AutoGenerateColumns="False" CanUserFreezeColumns="False" CanUserReorderColumns="False" CanUserResizeColumns="False" CanUserSortColumns="False" RowIndicatorVisibility="Collapsed" IsReadOnly="False" ShowGroupPanel="False"
                                ItemsSource="{Binding Transactions}"
                                RowDetailsTemplate="{StaticResource TransactionDetailDataTemplate}">
            <telerik:RadGridView.Columns>
                <telerik:GridViewToggleRowDetailsColumn />
                <telerik:GridViewDataColumn Header="TransactionID" IsVisible="False" DataMemberBinding="{Binding TransactionID}" />
                <telerik:GridViewDataColumn Header="UnitID" IsVisible="False" DataMemberBinding="{Binding UnitID}" />
                <telerik:GridViewDataColumn Header="Unit" IsVisible="False" DataMemberBinding="{Binding UnitMask}" />
                <telerik:GridViewDataColumn Header="Date" Width="65" DataMemberBinding="{Binding TransactionDCDate, Converter={StaticResource shortDateConverter}}" />
                <telerik:GridViewDataColumn Header="Description" Width="113" DataMemberBinding="{Binding Description}" />
                <telerik:GridViewDataColumn Header="Amt." Width="60" TextAlignment="Right" DataMemberBinding="{Binding TotalAmount, StringFormat=\{0:C2\}}" />
                <telerik:GridViewDataColumn Header="Rent" Width="60" TextAlignment="Right" DataMemberBinding="{Binding RentBucket, StringFormat=\{0:C2\}}" />
                <telerik:GridViewDataColumn Header="Fees" Width="60" TextAlignment="Right" DataMemberBinding="{Binding FeesBucket, StringFormat=\{0:C2\}}" />
                <telerik:GridViewDataColumn Header="Tax" Width="60" TextAlignment="Right" DataMemberBinding="{Binding TaxesBucket, StringFormat=\{0:C2\}}" />
                <telerik:GridViewDataColumn Header="Merch." Width="60" TextAlignment="Right" DataMemberBinding="{Binding MerchandiseBucket, StringFormat=\{0:C2\}}" />
                <telerik:GridViewDataColumn Header="Ins." Width="55" TextAlignment="Right" DataMemberBinding="{Binding InsuranceBucket, StringFormat=\{0:C2\}}" />
                <telerik:GridViewDataColumn Header="Other" Width="55" TextAlignment="Right" DataMemberBinding="{Binding OtherBucket, StringFormat=\{0:C2\}}" />
                <telerik:GridViewDataColumn Header="PrePay" Width="63" TextAlignment="Right" DataMemberBinding="{Binding PrePayBucket, StringFormat=\{0:C2\}}" />
                <telerik:GridViewDataColumn Header="Bal." Width="60" TextAlignment="Right" DataMemberBinding="{Binding BalanceBucket, StringFormat=\{0:C2\}}" />
                <telerik:GridViewDataColumn Header="Paid Thru" Width="77" TextAlignment="Right" DataMemberBinding="{Binding PaidThru}" />
            </telerik:RadGridView.Columns>
        </telerik:RadGridView>

    </Grid>

</UserControl>

The DataContext is set to my VM and the RadGridView (TransactionGridView) does populate with my Transactions (ObservableCollection), however my RowDetailTemplate (TransactionDetailGridView) does not populate with Transactions.TransactionDetails (ObservableCollection).

As I understand it the RowDetailTemplate should inherit the Parent DataContext, but this doesn't seem to be happening or I'm missing something?

Thanks, Rob.

P.S. Does anyone have a sample on how to bind RowDetailTemplates to the VM?

[Rob Ainscough]

SOLVED:

ItemsSource="{Binding Path=Transactions.TransactionDetails}"

changed to:

ItemsSource="{Binding Path=TransactionDetails}"

All good now.

Rob.