[Solved] How do I set child table properties?

[Steve]

I have a parent child relationship where I want to control the column width for both the parent and child rows.  I do not want headers, footers, and group panels.  I am able to control these properties for the parent rows, but need help setting the child properties.  I'm stuck, I don't know how to change the properties on the child rows to turn off headers, footers, and group panels.

        <telerik:RadGridView Name="ExerciseData" AutoGenerateColumns="False" ShowColumnHeaders="False" ShowGroupPanel="False"
                             FontFamily="Verdana" FontSize="9" Grid.Row="1">
            <telerik:RadGridView.Columns>
                <telerik:GridViewDataColumn Header="" DataMemberBinding="{Binding Col0}" Width="100"/>
                <telerik:GridViewDataColumn Header="" DataMemberBinding="{Binding Col1}" Width="30" />
                <telerik:GridViewDataColumn Header="" DataMemberBinding="{Binding Col2}" Width="30" />
                <telerik:GridViewDataColumn Header="" DataMemberBinding="{Binding Col3}" Width="30" />
                <telerik:GridViewDataColumn Header="" DataMemberBinding="{Binding Col4}" Width="30" />
                <telerik:GridViewDataColumn Header="" DataMemberBinding="{Binding Col5}" Width="30" />
                <telerik:GridViewDataColumn Header="" DataMemberBinding="{Binding Col6}" Width="30" />
                <telerik:GridViewDataColumn Header="" DataMemberBinding="{Binding Col7}" Width="30" />
            </telerik:RadGridView.Columns>

            <telerik:RadGridView.ChildTableDefinitions>
                <telerik:GridViewTableDefinition>
                    <telerik:GridViewTableDefinition.Relation>
                        <telerik:PropertyRelation ParentPropertyName="Aerobics" />
                    </telerik:GridViewTableDefinition.Relation>
                </telerik:GridViewTableDefinition>
                <telerik:GridViewTableDefinition>
                    <telerik:GridViewTableDefinition.Relation>
                        <telerik:PropertyRelation ParentPropertyName="Anaerobics" />
                    </telerik:GridViewTableDefinition.Relation>
                </telerik:GridViewTableDefinition>
            </telerik:RadGridView.ChildTableDefinitions>

        </telerik:RadGridView>

I have a simple set of classes to fill in some sample data:

        public MainPage()
        {
            InitializeComponent();
            //WeekHeaders.ItemsSource = WeekService.GetWeekHeaders();
            ExerciseData.ItemsSource = ExerciseService.GetExerciseData();
        }
    }

    public class Exercise
    {
        public string Col0 { get; set; }
        public int Col1 { get; set; }
        public int Col2 { get; set; }
        public int Col3 { get; set; }
        public int Col4 { get; set; }
        public int Col5 { get; set; }
        public int Col6 { get; set; }
        public int Col7 { get; set; }
        public List<ExerciseDetail> Aerobics { get; set; }
        public List<ExerciseDetail> Anaerobics { get; set; }
    }

    public class ExerciseDetail
    {
        public string col0 { get; set; }
        public int Col1 { get; set; }
        public int Col2 { get; set; }
        public int Col3 { get; set; }
        public int Col4 { get; set; }
        public int Col5 { get; set; }
        public int Col6 { get; set; }
        public int Col7 { get; set; }
    }

    public class ExerciseService
    {
        public static ObservableCollection<Exercise> GetExerciseData()
        {
            ObservableCollection<Exercise> exercises = new ObservableCollection<Exercise>();
            //Aerobic Totals
            Exercise exercise = new Exercise();
            exercise.Col0 = "Aerobic Total";
            exercise.Col1 = 110;
            exercise.Col2 = 125;
            exercise.Col3 = 140;
            exercise.Col4 = 80;
            exercise.Col5 = 110;
            exercise.Col6 = 125;
            exercise.Col7 = 140;

            //Aerobic Details
            exercise.Aerobics = new List<ExerciseDetail>();
            ExerciseDetail ed1 = new ExerciseDetail();
            ed1.col0 = "eliptical";
            ed1.Col1 = 30;
            ed1.Col2 = 45;
            ed1.Col3 = 60;
            ed1.Col4 = 0;
            ed1.Col5 = 30;
            ed1.Col6 = 45;
            ed1.Col7 = 60;
            exercise.Aerobics.Add(ed1);
            ExerciseDetail ed2 = new ExerciseDetail();
            ed2.col0 = "walking";
            ed2.Col1 = 60;
            ed2.Col2 = 60;
            ed2.Col3 = 60;
            ed2.Col4 = 60;
            ed2.Col5 = 60;
            ed2.Col6 = 60;
            ed2.Col7 = 60;
            exercise.Aerobics.Add(ed2);
            ExerciseDetail ed3 = new ExerciseDetail();
            ed3.col0 = "running";
            ed3.Col1 = 20;
            ed3.Col2 = 20;
            ed3.Col3 = 20;
            ed3.Col4 = 20;
            ed3.Col5 = 20;
            ed3.Col6 = 20;
            ed3.Col7 = 20;
            exercise.Aerobics.Add(ed3);
            exercises.Add(exercise);

            //Anaerobic Totals
            exercise = new Exercise();
            exercise.Col0 = "Anaerobic Total";
            exercise.Col1 = 90;
            exercise.Col2 = 105;
            exercise.Col3 = 120;
            exercise.Col4 = 0;
            exercise.Col5 = 90;
            exercise.Col6 = 105;
            exercise.Col7 = 120;

            //Anaerobic Details
            exercise.Anaerobics = new List<ExerciseDetail>();
            ExerciseDetail ed4 = new ExerciseDetail();
            ed4.col0 = "sprints";
            ed4.Col1 = 30;
            ed4.Col2 = 45;
            ed4.Col3 = 60;
            ed4.Col4 = 0;
            ed4.Col5 = 30;
            ed4.Col6 = 45;
            ed4.Col7 = 60;
            exercise.Anaerobics.Add(ed4);
            ExerciseDetail ed5 = new ExerciseDetail();
            ed5.col0 = "weights";
            ed5.Col1 = 60;
            ed5.Col2 = 60;
            ed5.Col3 = 60;
            ed5.Col4 = 60;
            ed5.Col5 = 60;
            ed5.Col6 = 60;
            ed5.Col7 = 60;
            exercise.Anaerobics.Add(ed5);
            exercises.Add(exercise);

            return exercises;
        }
    }

The attached output shows what I am getting. 

[Yavor Georgiev]

Hi Steve Dentel,

 Simply add a global style in the Page's resources to set those properties like so:

<UserControl.Resources>
    <Style TargetType="telerik:GridViewDataControl">
        <Setter Property="ShowColumnHeaders" Value="False"/>
        <Setter Property="ShowGroupPanel" Value="False"/>
    </Style>
</UserControl.Resources>

Note: this will apply to the parent grid as well.

Greetings,
Yavor Georgiev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Steve]

Hi Yavor,

Your solution works great.
Thank you!

I now need to know how to set the column widths for the child rows.  The child rows must align with the parent rows.  I also would like to remove the padding (gray area) between parent and child rows.

I have attached two files:

1. EnergizerGrid.png  <--how the grid looks now
2. EnergizerSpec.png  <--how I need the grid to look

Steve

[Yavor Georgiev]

Hello Steve Dentel,

 You can use the HierarchyChildTemplate property of the parent grid to define a wholly custom DataTemplate for how the hierarchy child should appear.

Regards,
Yavor Georgiev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Steve]

I've made an attempt to setup a HierarchyChildTemplate, but cannot get it to work.  Can you provide an example or point me to a reference that describes how the HierarchyChildTemplate is supposed to work?
Thank you!

[Yavor Georgiev]

Hello Steve Dentel,

 On second thought, seeing as you have multiple children, perhaps it's better to use RowDetails. I'm attaching a sample project using that.

Please let me know if I can be of further assistance.

Best wishes,
Yavor Georgiev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Steve]

I tried your RowDetails example, but could not get it to work.  I have refactored my code to utilize one child.  I've added a HierarchyChildTemplate, but am unable to get this to work either.  What am I doing wrong? 

    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
            WeekHeaders.ItemsSource = WeekService.GetWeekHeaders();
            ExerciseData.ItemsSource = ExerciseService.GetExerciseData();
        }
    }

    public class Exercise
    {
        public string Col0 { get; set; }
        public int Col1 { get; set; }
        public int Col2 { get; set; }
        public int Col3 { get; set; }
        public int Col4 { get; set; }
        public int Col5 { get; set; }
        public int Col6 { get; set; }
        public int Col7 { get; set; }
        public List<ExerciseDetail> ExerciseDetails { get; set; }
    }

    public class ExerciseDetail
    {
        public string col0 { get; set; }
        public int Col1 { get; set; }
        public int Col2 { get; set; }
        public int Col3 { get; set; }
        public int Col4 { get; set; }
        public int Col5 { get; set; }
        public int Col6 { get; set; }
        public int Col7 { get; set; }
    }

Here's the associated XAML.  Look at the second RadGridView (ExerciseData):

<UserControl x:Class="Energizer3Grid.MainPage"
    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"
    mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480" xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation">

    <UserControl.Resources>
        <Style TargetType="telerik:GridViewDataControl">
            <Setter Property="ShowColumnHeaders" Value="False" />
            <Setter Property="ShowGroupPanel" Value="False" />
            <Setter Property="BorderThickness" Value="0" />
            <Setter Property="RowIndicatorVisibility" Value="Collapsed" />
            <Setter Property="ColumnBackground" Value="White" />
        </Style>
    </UserControl.Resources>

        <Grid x:Name="LayoutRoot">

        <Grid.Resources>

            <Style x:Key="BoldLeftAlignCellStyle" TargetType="telerik:GridViewCell">
                <Setter Property="FontWeight" Value="Bold" />
                <Setter Property="TextAlignment" Value="Left" />
            </Style>

            <Style x:Key="Bold12PtCellStyle" TargetType="telerik:GridViewCell">
                <Setter Property="FontSize" Value="12" />
                <Setter Property="FontWeight" Value="Bold" />
            </Style>

            <Style x:Key="RightAlignWidth30" TargetType="telerik:GridViewCell">
                <Setter Property="TextAlignment" Value="Right" />
                <Setter Property="Width" Value="30" />
                <Setter Property="Background" Value="Red" />
            </Style>

        </Grid.Resources>

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

        <telerik:RadGridView x:Name="WeekHeaders" AutoGenerateColumns="False" ShowColumnHeaders="False" ShowGroupPanel="False"
                             CanUserDeleteRows="False" CanUserInsertRows="False" CanUserReorderColumns="False"
                             CanUserResizeColumns="False" CanUserSelect="False" CanUserSortColumns="False"
                             IsReadOnly="True" RowIndicatorVisibility="Collapsed" BorderThickness="0"
                             FontFamily="Verdana" FontSize="9" Grid.Row="0" ColumnBackground="Silver">
            <telerik:RadGridView.Columns>
                <telerik:GridViewDataColumn Header="" DataMemberBinding="{Binding Col0}" TextAlignment="Center" Width="125"/>
                <telerik:GridViewDataColumn Header="" DataMemberBinding="{Binding Col1}" TextAlignment="Center" Width="30" />
                <telerik:GridViewDataColumn Header="" DataMemberBinding="{Binding Col2}" TextAlignment="Center" Width="30" />
                <telerik:GridViewDataColumn Header="" DataMemberBinding="{Binding Col3}" TextAlignment="Center" Width="30" />
                <telerik:GridViewDataColumn Header="" DataMemberBinding="{Binding Col4}" TextAlignment="Center" Width="30" />
                <telerik:GridViewDataColumn Header="" DataMemberBinding="{Binding Col5}" TextAlignment="Center" Width="30" />
                <telerik:GridViewDataColumn Header="" DataMemberBinding="{Binding Col6}" TextAlignment="Center" Width="30" />
                <telerik:GridViewDataColumn Header="" DataMemberBinding="{Binding Col7}" TextAlignment="Center" Width="30" />
            </telerik:RadGridView.Columns>
        </telerik:RadGridView>

        <telerik:RadGridView x:Name="ExerciseData" AutoGenerateColumns="False" ShowColumnHeaders="False" ShowGroupPanel="False"
                             CanUserDeleteRows="False" CanUserInsertRows="False" CanUserReorderColumns="False"
                             CanUserResizeColumns="False" CanUserSelect="False" CanUserSortColumns="False"
                             IsReadOnly="True" RowIndicatorVisibility="Collapsed" BorderThickness="0"
                             FontFamily="Verdana" FontSize="9" Grid.Row="1" ColumnBackground="Silver"
                             >
            <telerik:RadGridView.Columns>
                <telerik:GridViewDataColumn DataMemberBinding="{Binding Col0}" Width="100" CellStyle="{StaticResource BoldLeftAlignCellStyle}"/>
                <telerik:GridViewDataColumn DataMemberBinding="{Binding Col1}" TextAlignment="Right" Width="30" />
                <telerik:GridViewDataColumn DataMemberBinding="{Binding Col2}" TextAlignment="Right" Width="30" />
                <telerik:GridViewDataColumn DataMemberBinding="{Binding Col3}" TextAlignment="Right" Width="30" />
                <telerik:GridViewDataColumn DataMemberBinding="{Binding Col4}" TextAlignment="Right" Width="30" />
                <telerik:GridViewDataColumn DataMemberBinding="{Binding Col5}" TextAlignment="Right" Width="30" />
                <telerik:GridViewDataColumn DataMemberBinding="{Binding Col6}" TextAlignment="Right" Width="30" />
                <telerik:GridViewDataColumn DataMemberBinding="{Binding Col7}" TextAlignment="Right" Width="30" />
            </telerik:RadGridView.Columns>

            <telerik:RadGridView.HierarchyChildTemplate>
                <DataTemplate>
                    <telerik:RadGridView AutoGenerateColumns="False" ShowColumnHeaders="False" ShowGroupPanel="False"
                                         FontFamily="Times New Roman" FontSize="6" ItemsSource="ExerciseDetails"
                                         RowIndicatorVisibility="Visible" >

                        <telerik:RadGridView.Columns>
                            <telerik:GridViewDataColumn DataMemberBinding="{Binding Col0}" Width="100"/>
                            <telerik:GridViewDataColumn DataMemberBinding="{Binding Col1}" Width="30" />
                            <telerik:GridViewDataColumn DataMemberBinding="{Binding Col2}" Width="30" />
                            <telerik:GridViewDataColumn DataMemberBinding="{Binding Col3}" Width="30" />
                            <telerik:GridViewDataColumn DataMemberBinding="{Binding Col4}" Width="30" />
                            <telerik:GridViewDataColumn DataMemberBinding="{Binding Col5}" Width="30" />
                            <telerik:GridViewDataColumn DataMemberBinding="{Binding Col6}" Width="30" />
                            <telerik:GridViewDataColumn DataMemberBinding="{Binding Col7}" Width="30" />
                        </telerik:RadGridView.Columns>

                    </telerik:RadGridView>
                </DataTemplate>
            </telerik:RadGridView.HierarchyChildTemplate>

            <telerik:RadGridView.ChildTableDefinitions>
                <telerik:GridViewTableDefinition>
                    <telerik:GridViewTableDefinition.Relation>
                        <telerik:PropertyRelation ParentPropertyName="ExerciseDetails" />
                    </telerik:GridViewTableDefinition.Relation>
                </telerik:GridViewTableDefinition>
            </telerik:RadGridView.ChildTableDefinitions>

        </telerik:RadGridView>

    </Grid>

</UserControl>

[Yavor Georgiev]

Hi Steve Dentel,

 On your child grid, ItemsSource should be:

ItemsSource="{Binding ExerciseDetails}"

Regards,
Yavor Georgiev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Jaco]

In VB I set the Child Table Properties using the following:

VB:

 

Private Sub gvMain_DataLoading(ByVal sender As Object, ByVal e As Telerik.Windows.Controls.GridView.GridViewDataLoadingEventArgs) Handles gvMain.DataLoading
    Dim dataControl As GridViewDataControl = DirectCast(sender, GridViewDataControl)
    If dataControl.ParentRow IsNot Nothing Then
        'dataControl is the child gridview
        dataControl.ShowGroupPanel = False
        dataControl.IsReadOnly = True
        dataControl.DataLoadMode = DataLoadMode.Asynchronous
    End If
End Sub