This is a migrated thread and some comments may be shown as answers.

GroupHeader Row style

1 Answer 83 Views
GridView
This is a migrated thread and some comments may be shown as answers.
Deepak
Top achievements
Rank 1
Deepak asked on 06 Aug 2014, 06:13 AM
Hi  Team

I am using Gridview Grouping functionality and using grouprender mode as Flat.

When I am creating style and using template for the same gridview throwing an error to me .Please have a look of follwing code :-



<navigation:Page.Resources>
<telerik:Office_BlackTheme x:Key="Theme"/>
<telerik:BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/>
<SolidColorBrush x:Key="ControlOuterBorder" Color="#FF848484"/>
<SolidColorBrush x:Key="ControlInnerBorder" Color="White"/>
<SolidColorBrush x:Key="GridView_GroupRowIndicator" Color="Black"/>
<ControlTemplate x:Key="GridViewGroupToggleButtonTemplate" TargetType="ToggleButton">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
<ContentPresenter/>
</Border>
</ControlTemplate>
<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="00:00:00">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="BottomBorder">
<DiscreteObjectKeyFrame KeyTime="00:00:00">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderThickness" Storyboard.TargetName="IconOuterBorder">
<DiscreteObjectKeyFrame KeyTime="00:00:00">
<DiscreteObjectKeyFrame.Value>
<Thickness>0</Thickness>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderThickness" Storyboard.TargetName="IconInnerBorder">
<DiscreteObjectKeyFrame KeyTime="00:00:00">
<DiscreteObjectKeyFrame.Value>
<Thickness>1 1 0 0</Thickness>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</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="*"/>
</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="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="{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>
<DataTemplate x:Key="GroupHeaderTemplate">
<ContentPresenter Content="{Binding Header}"/>
</DataTemplate>
<SolidColorBrush x:Key="GridView_GroupRowBackground" Color="#FFE4E4E4"/>
<SolidColorBrush x:Key="GridView_GridLinesItemBorder" Color="#FFCBCBCB"/>
<Style x:Key="GridViewGroupRowStyle1" TargetType="telerik:GridViewGroupRow">
<Setter Property="Template" Value="{StaticResource GridViewGroupRowTemplate}"/>
<Setter Property="GroupHeaderTemplate" Value="{StaticResource GroupHeaderTemplate}"/>
<Setter Property="Background" Value="{StaticResource GridView_GroupRowBackground}"/>
<Setter Property="BorderBrush" Value="{StaticResource GridView_GridLinesItemBorder}"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="Padding" Value="10 0 0 0"/>
<Setter Property="MinHeight" Value="25"/>
<Setter Property="AllowDrop" Value="True"/>
</Style>
</navigation:Page.Resources>



<Grid x:Name="LayoutRoot">
<Grid>

<telerik:RadGridView x:Name="rgrdPlayer"
CanUserFreezeColumns="False"
ShowGroupPanel="False"
ShowColumnFooters="False"
ShowGroupFooters="False"
GroupRenderMode="Flat"
EnableColumnVirtualization="False"
AutoGenerateColumns="True" >
<telerik:RadGridView.Resources>
<Style TargetType="telerik:GroupHeaderRow">
<Setter Property="ShowGroupHeaderColumnAggregates" Value="True" />
<Setter Property="ShowHeaderAggregates" Value="False" />
</Style>
</telerik:RadGridView.Resources>
<telerik:RadGridView.GroupRowStyle>
<StaticResource ResourceKey="GridViewGroupRowStyle1"/>
</telerik:RadGridView.GroupRowStyle>




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



I am trying to create a style for the GroupRowHeader.but its even not working with default style which is generated with the help of Expression Blend



Regards,
Deepak Joshi 

1 Answer, 1 is accepted

Sort by
0
Vanya Pavlova
Telerik team
answered on 06 Aug 2014, 08:23 AM
Hello Deepak,


Thank you for contacting us. 

We have tried to replicate the behavior you described, using the snippet provided, however to no avail.

Can you please take a look at the attached project and let us know how it differs from yours?  


Regards,
Vanya Pavlova
Telerik
 
Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
 
Tags
GridView
Asked by
Deepak
Top achievements
Rank 1
Answers by
Vanya Pavlova
Telerik team
Share this question
or