GroupHeader Row style

2 posts, 0 answers
  1. Deepak
    Deepak avatar
    1 posts
    Member since:
    Aug 2014

    Posted 06 Aug 2014 Link to this post

    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 
  2. Vanya Pavlova
    Admin
    Vanya Pavlova avatar
    2019 posts

    Posted 06 Aug 2014 Link to this post

    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.
     
  3. DevCraft banner
Back to Top