Frozen Columns, Group Aggregates and scrolling horizontal

[Inger Marie]

I have a RadGridView with FrozenColumnCount=4

When I group, the group header contains an aggregate count function.

But when I scroll to the right - the group header aggregate count is also scrolled away from view. I can still see the group header.

Is there any way to fix that?

I define the Group aggregate on the first column, like this:

<telerik:GridViewDataColumn.AggregateFunctions>
    <telerik:CountFunction  Caption="Count" ResultFormatString="{}: {0:#,0}"  />
</telerik:GridViewDataColumn.AggregateFunctions>

 

Thanks.

[Inger Marie]

Byt the way, the GroupRenderMode is flat

[Dilyan Traykov]

Hello,

In order to achieve the desired result, you should modify the control template of the GroupHeaderRow element. Here's the modified template for the Office_Black theme:

xmlns:grid="clr-namespace:Telerik.Windows.Controls.GridView;assembly=Telerik.Windows.Controls.GridView"

<ControlTemplate x:Key="GroupHeaderRowTemplate" TargetType="grid:GroupHeaderRow">
    <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="PART_HeaderAggregatesRow" Height="Auto"/>
        </Grid.RowDefinitions>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="ExpandStateGroup">
                <VisualState x:Name="Expanded">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="IconOuterBorder" Storyboard.TargetProperty="BorderThickness">
                            <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                <DiscreteObjectKeyFrame.Value>
                                    <Thickness>0</Thickness>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="IconInnerBorder" Storyboard.TargetProperty="BorderThickness">
                            <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                <DiscreteObjectKeyFrame.Value>
                                    <Thickness>1 1 0 0</Thickness>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ExpanderButton" Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)">
                            <EasingDoubleKeyFrame KeyTime="00:00:00" Value="180"/>
                        </DoubleAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="Collapsed">
                    <Storyboard>
                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ExpanderButton" Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)">
                            <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
                        </DoubleAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualStateGroup.Transitions>
                    <VisualTransition From="Expanded" To="Collapsed">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="IconOuterBorder" Storyboard.TargetProperty="BorderThickness">
                                <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                    <DiscreteObjectKeyFrame.Value>
                                        <Thickness>0 0 0 1</Thickness>
                                    </DiscreteObjectKeyFrame.Value>
                                </DiscreteObjectKeyFrame>
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="IconInnerBorder" Storyboard.TargetProperty="BorderThickness">
                                <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                    <DiscreteObjectKeyFrame.Value>
                                        <Thickness>1 1 0 1</Thickness>
                                    </DiscreteObjectKeyFrame.Value>
                                </DiscreteObjectKeyFrame>
                            </ObjectAnimationUsingKeyFrames>
                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ExpanderButton" Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)">
                                <EasingDoubleKeyFrame KeyTime="00:00:00.2" Value="0"/>
                            </DoubleAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualTransition>
                    <VisualTransition From="Collapsed" To="Expanded">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="IconOuterBorder" Storyboard.TargetProperty="BorderThickness">
                                <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                    <DiscreteObjectKeyFrame.Value>
                                        <Thickness>0</Thickness>
                                    </DiscreteObjectKeyFrame.Value>
                                </DiscreteObjectKeyFrame>
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="IconInnerBorder" Storyboard.TargetProperty="BorderThickness">
                                <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                    <DiscreteObjectKeyFrame.Value>
                                        <Thickness>1 1 0 0</Thickness>
                                    </DiscreteObjectKeyFrame.Value>
                                </DiscreteObjectKeyFrame>
                            </ObjectAnimationUsingKeyFrames>
                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ExpanderButton" Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)">
                                <EasingDoubleKeyFrame KeyTime="00:00:00.2" Value="180"/>
                            </DoubleAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualTransition>
                </VisualStateGroup.Transitions>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <Border
        BorderThickness="0 1 0 0"
        BorderBrush="{StaticResource ControlOuterBorder}"
        Grid.Column="2"
        grid:SelectiveScrollingGrid.SelectiveScrollingClip="True"
        Grid.ColumnSpan="2"
        VerticalAlignment="Top"
        Margin="0 -1 0 0"/>
        <Border x:Name="ToggleButtonBorder"
        Background="{TemplateBinding Background}"
        Grid.Column="2"
        Grid.ColumnSpan="2"
        grid:SelectiveScrollingGrid.SelectiveScrollingClip="True"
        MinHeight="{TemplateBinding MinHeight}">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="25"/>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Border x:Name="IconOuterBorder"
                BorderBrush="{StaticResource ControlOuterBorder}"
                Background="Transparent"
                BorderThickness="0 0 0 1"
                HorizontalAlignment="Stretch"
                grid:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical">
                    <Border x:Name="IconInnerBorder" BorderBrush="{StaticResource ControlInnerBorder}" BorderThickness="1 1 0 1">
                        <Path x:Name="ExpanderButton"
                        Grid.Column="0"
                        HorizontalAlignment="Left"
                        Margin="{TemplateBinding Padding}"
                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                        Fill="{StaticResource GridView_GroupRowIndicator}"
                        Width="7"
                        Height="5"
                        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"
                        RenderTransformOrigin="0.5,0.5">
                            <Path.RenderTransform>
                                <RotateTransform/>
                            </Path.RenderTransform>
                        </Path>
                    </Border>
                </Border>
                <ToggleButton x:Name="HeaderButton"
                Grid.Column="0"
                Grid.ColumnSpan="3"
                Background="{TemplateBinding Background}"
                grid:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical"
                IsChecked="{Binding IsExpanded, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                Opacity="0"
                IsTabStop="{TemplateBinding IsTabStop}"/>
                <ToggleButton
                Grid.Column="1"
                Padding="0 0 10 0"
                grid:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical"
                Background="Transparent"
                BorderThickness="0"
                BorderBrush="{x:Null}"
                Style="{StaticResource GroupHeaderRowToggleButtonStyle}"
                IsChecked="{Binding IsExpanded, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                IsTabStop="{TemplateBinding IsTabStop}">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>
                        <ContentPresenter Grid.Column="0" Margin="0 0 10 0" Content="{TemplateBinding GroupViewModel}" VerticalAlignment="Center" ContentTemplate="{TemplateBinding GroupHeaderTemplate}"/>
                        <Border
                Visibility="{Binding ShowHeaderAggregates, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource BooleanToVisibilityConverter}}"
                Grid.Column="1">
                            <grid:AggregateResultsList ItemsSource="{TemplateBinding AggregateResults}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}">
                                <grid:AggregateResultsList.ItemTemplate>
                                    <DataTemplate>
                                        <grid:GridViewAggregateResultCell AggregateResult="{Binding}"/>
                                    </DataTemplate>
                                </grid:AggregateResultsList.ItemTemplate>
                                <grid:AggregateResultsList.ItemsPanel>
                                    <ItemsPanelTemplate>
                                        <StackPanel Orientation="Horizontal"/>
                                    </ItemsPanelTemplate>
                                </grid:AggregateResultsList.ItemsPanel>
                            </grid:AggregateResultsList>
                        </Border>
                    </Grid>
                </ToggleButton>
                <Border
                grid:SelectiveScrollingGrid.SelectiveScrollingClip="True"
                BorderBrush="{StaticResource ControlOuterBorder}"
                BorderThickness="0 0 0 1"
                Grid.Column="1"
                Grid.ColumnSpan="2">
                    <Border BorderBrush="{StaticResource ControlInnerBorder}" BorderThickness="0 1 1 1"/>
                </Border>
            </Grid>
        </Border>
        <Border x:Name="PART_IndicatorPresenter"
        Width="25"
        VerticalAlignment="Stretch"
        Grid.Column="0"
        Visibility="{TemplateBinding RowIndicatorVisibility}"
        grid:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical"
        BorderBrush="{StaticResource ControlOuterBorder}"
        BorderThickness="0 0 1 1">
            <Border Background="{StaticResource GridView_RowIndicatorCellBackground}" BorderBrush="{StaticResource ControlInnerBorder}" BorderThickness="1"/>
        </Border>
        <grid:IndentPresenter
        grid:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical"
        IndentLevel="{TemplateBinding Level}"
        Background="{TemplateBinding Background}"
        Grid.Column="1"/>
        <grid:GridViewGroupFooterRow x:Name="FooterRowForHeaderAggregates"
        Visibility="{Binding ShowGroupHeaderColumnAggregates, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource BooleanToVisibilityConverter}}"
        Grid.Row="1"
        Grid.Column="0"
        Grid.ColumnSpan="5"/>
    </Grid>
</ControlTemplate>
<Style TargetType="grid:GroupHeaderRow">
    <Setter Property="Template" Value="{StaticResource GroupHeaderRowTemplate}"/>
</Style>

If you're using a different theme you will need to make the necessary modifications. Please let me know if you need any further assistance.

Regards,
Dilyan Traykov
Telerik by Progress

[Inger Marie]

That seems like kind of a big thing - in order to do something which should be standard functionality (at least I fail to understand when anyone would want the function aggregate to scroll out of view).

But thanks, I will look into it.