Need some help in editing the ControlTemplate "GridViewGroupRowTemplate" of the RagGridView Telerik Rad control

[Manoharan]

Hi,
     I have to develop UI similar to that of the images attached with this post. I am not sure which Telerik Rad Control to be used i.e. RadGridView or RadTreeListView..

     1. The functionality is to display the records, which will be fetched by the WCF call, such that they will be grouped by the studentID (shown in the Image1 Grouping.png) and has to display the Total mark on the GridViewGroupRow in the specified column.
     2. If the user clicks on the GridViewGroupRow, then it has to be expanded showing the marks obtained by the student in all the subjects mentioned as S1,S2 in the image2 (ExpandtheGroup.png).
     3. While loading the data itself, the Total Marks has to be calculated and displayed in the specific column as shown in the first image.

     I started with RadGridView. In that i edited the ControlTemplate "GridViewGroupRowTemplate" and added a toggle button for displaying the Total marks. Also i got the Total marks of all subject with the help of aggregate function defined on the "Mark" column. But the issue is i am not able to bind the result of the aggregate function to the toggle button content and also not able to align the toggle button to the specific column..

<Style x:Key="GridViewGroupToggleButtonStyle" TargetType="ToggleButton">
            <Setter Property="Template" Value="{StaticResource GridViewGroupToggleButtonTemplate}"/>
            <Setter Property="HorizontalContentAlignment" Value="Left"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="Padding" Value="9,0,0,0"/>
        </Style>
        <SolidColorBrush x:Key="GridView_RowIndicatorCellBackground" Color="#FFE4E4E4"/>
        <ControlTemplate x:Key="GridViewGroupRowTemplate" TargetType="telerik:GridViewGroupRow">
            <Grid x:Name="PART_GroupExpanderGrid">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition x:Name="PART_HeaderRow" MinHeight="{TemplateBinding MinHeight}"/>
                    <RowDefinition x:Name="ContentRow" Height="Auto"/>
                </Grid.RowDefinitions>
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup x:Name="ExpandStateGroup">
                        <VisualState x:Name="Expanded">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="Content">
                                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible"/>
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="BottomBorder">
                                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible"/>
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderThickness" Storyboard.TargetName="IconOuterBorder">
                                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="0,0,0,0"/>
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderThickness" Storyboard.TargetName="IconInnerBorder">
                                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="1,1,0,0"/>
                                </ObjectAnimationUsingKeyFrames>
                                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)" Storyboard.TargetName="ExpanderButton">
                                    <EasingDoubleKeyFrame KeyTime="00:00:00.2" Value="180"/>
                                </DoubleAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="Collapsed">
                            <Storyboard>
                                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)" Storyboard.TargetName="ExpanderButton">
                                    <EasingDoubleKeyFrame KeyTime="00:00:00.2" Value="0"/>
                                </DoubleAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
                <Border x:Name="ToggleButtonBorder" Background="{TemplateBinding Background}" Grid.ColumnSpan="2" Grid.Column="2" MinHeight="{TemplateBinding MinHeight}" telerik:SelectiveScrollingGrid.SelectiveScrollingClip="True">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="25"/>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="300"/>
                        </Grid.ColumnDefinitions>
                        <Border Grid.Column="2" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" telerik:SelectiveScrollingGrid.SelectiveScrollingClip="True" Visibility="{Binding ShowHeaderAggregates, Converter={StaticResource BooleanToVisibilityConverter}, RelativeSource={RelativeSource TemplatedParent}}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                            <telerik:AggregateResultsList HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" ItemsSource="{TemplateBinding AggregateResults}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                                <telerik:AggregateResultsList.ItemsPanel>
                                    <ItemsPanelTemplate>
                                        <StackPanel Orientation="Horizontal"/>
                                    </ItemsPanelTemplate>
                                </telerik:AggregateResultsList.ItemsPanel>
                                <telerik:AggregateResultsList.ItemTemplate>
                                    <DataTemplate>
                                        <telerik:GridViewAggregateResultCell AggregateResult="{Binding}" telerik:StyleManager.Theme="{StaticResource Theme}"/>
                                    </DataTemplate>
                                </telerik:AggregateResultsList.ItemTemplate>
                            </telerik:AggregateResultsList>
                        </Border>
                        <Border x:Name="IconOuterBorder" BorderBrush="{StaticResource ControlOuterBorder}" BorderThickness="0,0,0,1" Background="Transparent" HorizontalAlignment="Stretch" telerik:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical">
                            <Border x:Name="IconInnerBorder" BorderBrush="{StaticResource ControlInnerBorder}" BorderThickness="1,1,0,1">
                                <Path x:Name="ExpanderButton" Grid.Column="0" Data="M0,0L1,0 2,0 2,0.99999991 3,0.99999991 3,2 4,2 4,0.99999991 5,0.99999991 5,0 5.9999999,0 7,0 7,0.99999991 5.9999999,0.99999991 5.9999999,2 5,2 5,3 4,3 4,4 3,4 3,3 2,3 2,2 1,2 1,0.99999991 0,0.99999991z" Fill="{StaticResource GridView_GroupRowIndicator}" HorizontalAlignment="Left" Height="5" Margin="{TemplateBinding Padding}" RenderTransformOrigin="0.5,0.5" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Width="7">
                                    <Path.RenderTransform>
                                        <RotateTransform/>
                                    </Path.RenderTransform>
                                </Path>
                            </Border>
                        </Border>
                        <ToggleButton x:Name="HeaderButton" Background="{TemplateBinding Background}" Grid.ColumnSpan="3" Grid.Column="0" IsTabStop="{TemplateBinding IsTabStop}" IsChecked="{Binding IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" Opacity="0" telerik:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical"/>
                        <ToggleButton BorderBrush="{x:Null}" BorderThickness="0" Background="Transparent" Grid.Column="1" IsTabStop="{TemplateBinding IsTabStop}" IsChecked="{Binding IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" Padding="0,0,10,0" Style="{StaticResource GridViewGroupToggleButtonStyle}" telerik:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical">
                            <ContentPresenter ContentTemplate="{TemplateBinding GroupHeaderTemplate}" Content="{TemplateBinding GroupViewModel}" Grid.Column="1" Margin="0,0,10,0" VerticalAlignment="Center"/>
                        </ToggleButton>
                        <Border BorderBrush="{StaticResource ControlOuterBorder}" BorderThickness="0,0,0,1" Grid.ColumnSpan="4" Grid.Column="1" telerik:SelectiveScrollingGrid.SelectiveScrollingClip="True">
                            <Border BorderBrush="{StaticResource ControlInnerBorder}" BorderThickness="0,1,1,1"/>
                        </Border>
                        <ToggleButton BorderBrush="{x:Null}" BorderThickness="0" Background="Transparent" Grid.Column="3" IsTabStop="{TemplateBinding IsTabStop}" IsChecked="{Binding IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" Padding="0,0,10,0" Style="{StaticResource GridViewGroupToggleButtonStyle}" telerik:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical">
                            <ContentPresenter ContentTemplate="{TemplateBinding GroupHeaderTemplate}" Content="{Binding AggregateResults[0].Value}" Grid.Column="1" Margin="0,0,10,0" VerticalAlignment="Center" HorizontalAlignment="Right"/>
                        </ToggleButton>
                    </Grid>
                </Border>
                <Border x:Name="PART_IndicatorPresenter" BorderBrush="{StaticResource ControlOuterBorder}" BorderThickness="0,0,1,1" Grid.Column="0" telerik:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical" Visibility="{TemplateBinding RowIndicatorVisibility}" VerticalAlignment="Stretch" Width="25">
                    <Border BorderBrush="{StaticResource ControlInnerBorder}" BorderThickness="1" Background="{StaticResource GridView_RowIndicatorCellBackground}"/>
                </Border>
                <telerik:IndentPresenter Background="{TemplateBinding Background}" Grid.Column="1" IndentLevel="{TemplateBinding Level}" telerik:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical" telerik:StyleManager.Theme="{StaticResource Theme}"/>
                <Border x:Name="Content" Grid.ColumnSpan="5" Grid.Column="0" Grid.Row="1" Visibility="Collapsed">
                    <StackPanel>
                        <telerik:GridViewVirtualizingPanel x:Name="PART_GridViewVirtualizingPanel"/>
                        <telerik:GridViewGroupFooterRow x:Name="Footer" telerik:StyleManager.Theme="{StaticResource Theme}"/>
                    </StackPanel>
                </Border>
                <Border x:Name="BottomBorder" BorderBrush="{StaticResource ControlOuterBorder}" BorderThickness="0,0,0,1" Grid.Column="2" Grid.Row="1" telerik:SelectiveScrollingGrid.SelectiveScrollingClip="True" Visibility="Collapsed" VerticalAlignment="Bottom"/>
            </Grid>
        </ControlTemplate>

     Please let me know whether to continue with this or to use the RadTreeListView..

Thanks
Manohar