[Solved] Styling Grouped Rows

[Thomas]

I have created a custom style for my grouped rows, but the new style that I created no longer tiers children grouped rows. I can't seem to figure out a property that maintains the tiered affect. Can anyone suggest a way to do this? I'm attaching images of before and after styling so you can see what I'm talking about.

[Vanya Pavlova]

Hi Thomas,

 
You may easily achieve this result by editing the template of GridViewGroupRow and set the Orientation property of the StackPanel within AggregateResultsList to Vertical. 
Please find the attached project that demonstrates how this can be achieved.

Kind regards,
Vanya Pavlova
the Telerik team

[Thomas]

Thanks for the reply.

I did have have the orientation set to Vertical and I tried playing with the margin, but had no luck. Below is the style we are using. Thanks for your help!

<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" Grid.ColumnSpan="2" Grid.Column="2" MinHeight="{TemplateBinding MinHeight}" telerik:SelectiveScrollingGrid.SelectiveScrollingClip="True" Background="#FFE8EFFC">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="25"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
            </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}" Style="{StaticResource AggregateResultsListStyle1}" Foreground="#FF3B6D8E" FontFamily="Times New Roman" Margin="0,5" FontSize="10.667">
                    <telerik:AggregateResultsList.ItemsPanel>
                        <ItemsPanelTemplate>
                            <StackPanel Orientation="Vertical"/>
                        </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="2" Grid.Column="1" telerik:SelectiveScrollingGrid.SelectiveScrollingClip="True">
                <Border BorderBrush="{StaticResource ControlInnerBorder}" BorderThickness="0,1,1,1"/>
            </Border>
        </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="#FFE8EFFC"/>
    </Border>
    <telerik:IndentPresenter Grid.Column="1" IndentLevel="{TemplateBinding Level}" telerik:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical" telerik:StyleManager.Theme="{StaticResource Theme}" Visibility="Collapsed" Background="#FFE8EFFC" FontFamily="Times New Roman" FontSize="12"/>
    <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" Visibility="Collapsed" VerticalAlignment="Bottom"/>
</Grid>
</ControlTemplate>

[Vanya Pavlova]

Hi Thomas,


Thank you for sending this snippet. However I am not able to understand what is wrong, because everything works as expected on my side. Can you please give us a little bit more info about the problem? Also you may send us a small application via support ticket and in this way we would be able to provide you with an appropriate solution.
Thank you!

 
Greetings,
Vanya Pavlova
the Telerik team