This is a migrated thread and some comments may be shown as answers.

How to bind my MVVM to a RowDetailsTemplate?

1 Answer 99 Views
GridView
This is a migrated thread and some comments may be shown as answers.
Rob Ainscough
Top achievements
Rank 1
Rob Ainscough asked on 29 Nov 2012, 06:47 PM
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?

1 Answer, 1 is accepted

Sort by
0
Rob Ainscough
Top achievements
Rank 1
answered on 29 Nov 2012, 08:17 PM
SOLVED:

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

changed to:

ItemsSource="{Binding Path=TransactionDetails}"

All good now.

Rob.
Tags
GridView
Asked by
Rob Ainscough
Top achievements
Rank 1
Answers by
Rob Ainscough
Top achievements
Rank 1
Share this question
or