Problem w/ RadGridView Details Grid Customization

[Rob]

Hello I am trying to create a simple RadGridView based UserControl. I am getting all the data to display but cannot seem to get any attributes to set on the Child Grid. I've created a template grid for the child grid but it always seems to AutoGenerateColumns and ignore my column definitions along with any specific attributes at the Grid level.

Here is my Control w/ Grid:

<UserControl x:Class="CCIGrid02.Views.WbsUserControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
             xmlns:viewModels="clr-namespace:MetaEstimatingProject.ViewModels;assembly=MetaEstimatingProject"
             mc:Ignorable="d"
             d:DesignHeight="480" d:DesignWidth="640">
    <Grid>
        <Grid.Resources>
            <viewModels:WbsViewModel x:Key="WbsViewModel" />
            <DataTemplate x:Key="RowDetailsTemplate">
                <telerik:RadGridView Name="valsgrid" AutoGenerateColumns="False" CanUserDeleteRows="True" CanUserInsertRows="True"
                                     ShowInsertRow="True" ShowGroupPanel="False"
                                     Width="640" Height="480">
                    <telerik:RadGridView.Columns>
                        <telerik:GridViewDataColumn DataMemberBinding="{Binding Code}" Width="100"/>
                        <telerik:GridViewDataColumn DataMemberBinding="{Binding Description}" Width="250"/>
                        <telerik:GridViewDataColumn DataMemberBinding="{Binding Notes}" Width="500"/>
                    </telerik:RadGridView.Columns>
                </telerik:RadGridView>
            </DataTemplate>

        </Grid.Resources>

        <telerik:RadGridView x:Name="gridView" ItemsSource="{Binding WbsKeys, Source={StaticResource WbsViewModel}}"
                             RowDetailsTemplate="{StaticResource RowDetailsTemplate}"
                             AutoGenerateColumns="False" ShowInsertRow="True" ShowGroupPanel="False">
            <telerik:RadGridView.Columns>
                <telerik:GridViewDataColumn DataMemberBinding="{Binding Key}" Header="Wbs Key" UniqueName="WbsKey" MinWidth="125"/>
                <telerik:GridViewDataColumn DataMemberBinding="{Binding Description}" Header="Description" UniqueName="WbsDesc" MinWidth="175"/>
            </telerik:RadGridView.Columns>
            <telerik:RadGridView.ChildTableDefinitions>
                <telerik:GridViewTableDefinition>
                    <telerik:GridViewTableDefinition.Relation>
                        <telerik:PropertyRelation ParentPropertyName="Values" />
                    </telerik:GridViewTableDefinition.Relation>
                </telerik:GridViewTableDefinition>
            </telerik:RadGridView.ChildTableDefinitions>


        </telerik:RadGridView>
    </Grid>
</UserControl>

Pretty simple right out of the example on the documentation.

Here is my Data objects I populate with mock data for testing:

public class WbsKey {
     #region C'tors

     public WbsKey() {
         Key = "EmptyKey";
         Description = "Empty Desc";
         Values = new List<WbsValue>();
     }

     public WbsKey(string key)
     {
         Key = key;
         Description = "Empty Desc";
         Values = new List<WbsValue>();
     }

     public WbsKey(string key, string description) {
         Key = key ?? "EmptyKey";
         Description = description ?? "Empty Desc";
         Values = new List<WbsValue>();
     }

     public WbsKey(string key, List<WbsValue> values) {
         Key = key ?? "EmptyKey";
         Values = values ?? new List<WbsValue>();
     }

     #endregion

     #region Instance Properties

     public string Key { get; set; }
     public string Description { get; set; }
     public List<WbsValue> Values { get; set; }

     #endregion
 }
public class WbsValue {
     #region C'tors

     public WbsValue() {
     }

     public WbsValue(string code, string description) {
         Code = code;
         Description = description;
     }

     public WbsValue(string code, string description, string notes) {
         Code = code;
         Description = description;
         Notes = notes;
     }

     #endregion

     #region Instance Properties

     public string Code { get; set; }
     public string Description { get; set; }
     public string Notes { get; set; }

     #endregion
 }

I also attached a screen shot of what I am talking about in the application.

If you look at the XAML I have these important attributes I need in the Details Grid:

<DataTemplate x:Key="RowDetailsTemplate">
                <telerik:RadGridView Name="valsgrid" AutoGenerateColumns="False" CanUserDeleteRows="True" CanUserInsertRows="True"
                                     ShowInsertRow="True" ShowGroupPanel="False"
                                     Width="640" Height="480">
                    <telerik:RadGridView.Columns>
                        <telerik:GridViewDataColumn DataMemberBinding="{Binding Code}" Width="100"/>
                        <telerik:GridViewDataColumn DataMemberBinding="{Binding Description}" Width="250"/>
                        <telerik:GridViewDataColumn DataMemberBinding="{Binding Notes}" Width="500"/>
                    </telerik:RadGridView.Columns>
                </telerik:RadGridView>
            </DataTemplate>

The user does not need to see the Grouping bar and also should be able to add new rows, almost identical to the parent Grid.

I'd appreciate any advice. Thanks!

[Boris]

Hello Rob,

The reason your "RowDetailsTemplate" template is not applied is because you have not defined a GridViewToggleRowDetailsColumn column in your main GridView. In addition, just adding this column to the column definitions will result in double plus / minus toggle buttons. That is so because you have defined a ChildTableDefinition, which is a separate method for displaying hierarchical data. As for applying the RowDetails, they are another way for displaying your additional row data. 

Just to summarize, you will need to remove the ChildTableDefinition and add the GridViewToggleRowDetailsColumn to your main grid like so:

<telerik:RadGridView x:Name="gridView" ItemsSource="{Binding WbsKeys, Source={StaticResource WbsViewModel}}"
                             RowDetailsTemplate="{StaticResource RowDetailsTemplate}"
                             AutoGenerateColumns="False" ShowInsertRow="True" ShowGroupPanel="False">
            <telerik:RadGridView.Columns>
<telerik:GridViewToggleRowDetailsColumn />
                <telerik:GridViewDataColumn DataMemberBinding="{Binding Key}" Header="Wbs Key" UniqueName="WbsKey" MinWidth="125"/>
                <telerik:GridViewDataColumn DataMemberBinding="{Binding Description}" Header="Description" UniqueName="WbsDesc" MinWidth="175"/>
            </telerik:RadGridView.Columns>
            <!--<telerik:RadGridView.ChildTableDefinitions>
                <telerik:GridViewTableDefinition>
                    <telerik:GridViewTableDefinition.Relation>
                        <telerik:PropertyRelation ParentPropertyName="Values" />
                    </telerik:GridViewTableDefinition.Relation>
                </telerik:GridViewTableDefinition>
            </telerik:RadGridView.ChildTableDefinitions>
             -->
</telerik:RadGridView>

On a side note, I noticed that you are using the ShowInsertRow="True" to show the "Click here to add a new Item" button, which is marked to be obsoleted in some of the next releases. As a substitute you can consider changing it with the NewRowPosition="Top" property.

I hope this helps.

Regards,
Boris Penev
Telerik

 

 

[Rob]

Thanks Boris, I've made the changes (and a few others), the grid is now applying the row details template properly.

However now my ItemSource binding I am struggling with to associate the details. I get no data in the grid.

How would I set this properly? The data for the row details is contained in the List<WbsValue> Values property of the WbsKeys Observable Collection of my ViewModel. (See above code if you need reference)

Updated XAML:

<Grid DataContext="{Binding Source={StaticResource WbsViewModel}}">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="35"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <StackPanel Grid.Row="0" Grid.Column="0"
                    Orientation="Horizontal" VerticalAlignment="Top" HorizontalAlignment="Right"
                    >
            <telerik:RadButton Content="Add New" Margin="0,0,10,0" Command="{Binding AddCommand}"/>
            <telerik:RadButton Content="Delete" Margin="0,0,10,0" Command="{Binding DeleteCommand}"/>
        </StackPanel>
        <telerik:RadGridView x:Name="gridView"
                             ItemsSource="{Binding WbsKeys}"
                             AutoGenerateColumns="False" ShowGroupPanel="False"
                             Grid.Column="0" Grid.Row="1"
                             SelectedItem="{Binding SelectedWbsKey}"
                             >
            <telerik:RadGridView.RowDetailsTemplate>
                <DataTemplate>
                    <telerik:RadGridView Name="valsgrid" AutoGenerateColumns="False"
                                     CanUserDeleteRows="True" CanUserInsertRows="True"
                                     ShowGroupPanel="False" Width="640" Height="480"
                                     ItemsSource="{????}"
                                     >
                        <telerik:RadGridView.Columns>
                            <telerik:GridViewDataColumn Header="Code" DataMemberBinding="{Binding Code}" Width="75"/>
                            <telerik:GridViewDataColumn Header="Description" DataMemberBinding="{Binding Description}" Width="250"/>
                            <telerik:GridViewDataColumn Header="Notes" DataMemberBinding="{Binding Notes}" Width="250"/>
                        </telerik:RadGridView.Columns>
                    </telerik:RadGridView>
                </DataTemplate>
            </telerik:RadGridView.RowDetailsTemplate>
            <telerik:RadGridView.Columns>
                <telerik:GridViewToggleRowDetailsColumn />
                <telerik:GridViewDataColumn DataMemberBinding="{Binding Key}" Header="Wbs Key" UniqueName="WbsKey" MinWidth="125"/>
                <telerik:GridViewDataColumn DataMemberBinding="{Binding Description}" Header="Description" UniqueName="WbsDesc" MinWidth="175"/>
            </telerik:RadGridView.Columns>
        </telerik:RadGridView>
    </Grid>

My Data Context is set to the ViewModel, The ItemSource for the Parent Grid is set to the List<WbsValue> Values property. Now the details grid needs to be bound to the Values property of the selected WbsKey from the parent.

Thanks again for the big help!

[Boris]

Hello Rob,

I will try to explain what is the binding logic for the RowDetails GridView. 

1) First you bind your main GridView's ItemsSource collection to a WbsKeys collection from your WbsViewModel. This collection contains items of type WbsKey, from which you display in the main GridView the Key and Description properties.

public class WbsKey
 {
   ...
     public string Key { get; set; }
     public string Description { get; set; }
     public List<WbsValue> Values { get; set; }

 }

2) Then the values that need to be displayed by the RowDetails GridView are stored in the Values property of the WbsKey class. Thus you will need to bind the ItemsSource property of the RowDetails GridView to that property.

<telerik:RadGridView x:Name="gridView"
             ItemsSource="{Binding WbsKeys}"
             AutoGenerateColumns="False"
                             ...>
            <telerik:RadGridView.RowDetailsTemplate>
                <DataTemplate>
                    <telerik:RadGridView Name="valsgrid"
                                     AutoGenerateColumns="False"
                                     ItemsSource="{Binding Values}"
                                     ...>
                        <telerik:RadGridView.Columns>
                           ...
                        </telerik:RadGridView.Columns>
                    </telerik:RadGridView>
                </DataTemplate>
            </telerik:RadGridView.RowDetailsTemplate>
            ...
</telerik:RadGridView>

Just in case I did not explain very well what I have in mind, I attached a sample project that demonstrate a similar approach.


Regards,
Boris Penev
Telerik

 

 

[Rob]

Hi Boris, quick update. Everything is working as expected. Thanks for your help!