How to bind my MVVM to a RowDetailsTemplate?

2 posts, 0 answers
  1. Rob Ainscough
    Rob Ainscough avatar
    262 posts
    Member since:
    Jan 2010

    Posted 29 Nov 2012 Link to this post

    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:DC="clr-namespace:DCApp" 
     
        <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?
  2. Rob Ainscough
    Rob Ainscough avatar
    262 posts
    Member since:
    Jan 2010

    Posted 29 Nov 2012 Link to this post

    SOLVED:

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

    changed to:

    ItemsSource="{Binding Path=TransactionDetails}"

    All good now.

    Rob.
Back to Top