[Solved] GroupDescriptor HeaderCellStyle

[vika]

We added a GroupDescriptor to our gridview and it functionally works fine
but the problem is that  we could not find any document on how to set  the
style on the header cell just above the groupdescripter pointer.
I did try to add styles by looping all the columns in the grid loaded handler but it did not work ( below code)

private void dbgGrid_Loaded(object sender, RoutedEventArgs e)
{
  foreach( GridViewColumn Obj in ((GridViewDataControl)(sender)).Columns)
  {
    Obj.HeaderCellStyle = App.Current.Resources["HeaderCellStyle"] as Style;
  }
}

I also did check the forum and found this sample code on this post ,but that is not what i want
http://www.telerik.com/community/forums/silverlight/gridview/question-for-groupdescriptor-in-radgridview.aspx

to make the picture clear have attach a image, 
highlighted part are the column header's whose style needed to be set.

 

 

 

 

 

 

 

[Vanya Pavlova]

Hi vika,

 
You need to style GridViewGroupPanelItem in RadGridView and in our online documentation you will find the information you need, following this link.

Please let me know how I can assist you further.

Greetings,
Vanya Pavlova
the Telerik team

[vika]

Hi Vanya
Thanks for the fast reply, I did try the way you explained but it did not work
Also I check the project attach in this link by you,
http://www.telerik.com/community/forums/silverlight/gridview/header-background-color.aspx
unfortunately that also did not work .



I was able to change the background of the row but not of the first column that is auto generated
after adding the grouping (by help of GroupDescriptor )

Attach is an image please review and advice

[Vanya Pavlova]

Hi Vika,

 
This part of GridViewHeaderRow is named PART_IndicatorPresenter and you can modify its properties by editing the template of GridViewHeaderRow.
You may find attached a sample project that demonstrates this approach.

Kind regards,
Vanya Pavlova
the Telerik team

[vika]

Sorry , I should have clarified that it is not the RowIndicator , in my grid I have  RowIndicatorVisibility="Collapsed"
One more thing in my grid we are not auto generating the columns and we had to set the
GridViewHeaderCell Style so we are setting the GridViewHeaderCell stye dynamically from the code behind.
So we applied grouping using GroupDescriptors, The problem is the column header
of the group which is just  above the rotating icon '>' is not getting the cell style.

I have attach the repro project please download and check , I hope this will help you reproduce the exact problem we are facing
(could not attach a zip, attach is MainPage.xaml & MainPage.xaml.cs both sould be enough for repro)

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
    x:Class="SilverlightApplication173.MainPage"
    Width="640" Height="480">
    <UserControl.Resources>
        <SolidColorBrush x:Key="GridView_HeaderRowInnerBorder" Color="#FF4B4B4B"/>
        <telerik:Office_BlackTheme x:Key="Theme"/>
        <SolidColorBrush x:Key="GridView_HeaderInnerBorder" Color="#FF4B4B4B"/>
        <!--<LinearGradientBrush x:Key="GridView_HeaderBackground" EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#FF5B5B5B" Offset="1"/>
            <GradientStop Color="#FF868686"/>
            <GradientStop Color="#FF4F4F4F" Offset="0.42"/>
            <GradientStop Color="#FF0E0E0E" Offset="0.43"/>
        </LinearGradientBrush>-->

        <LinearGradientBrush  x:Key="GridView_HeaderBackground" StartPoint="0.5,0" EndPoint="0.5,1">
            <GradientStop Color="#FF8CB0D2" Offset="0.5"/>
            <GradientStop Color="#FF45525B" Offset="1.0"/>
        </LinearGradientBrush>


        <DataTemplate x:Key="GridViewHeaderIndentCellDataTemplate">
            <telerik:GridViewHeaderIndentCell telerik:StyleManager.Theme="{StaticResource Theme}"/>
        </DataTemplate>
        <telerik:BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/>
        <ControlTemplate x:Key="GridViewHeaderRowTemplate" TargetType="telerik:GridViewHeaderRow">
            <telerik:SelectiveScrollingGrid>
                <telerik:SelectiveScrollingGrid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="*"/>
                </telerik:SelectiveScrollingGrid.ColumnDefinitions>
                <Border x:Name="PART_GridViewHeaderRowBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Grid.ColumnSpan="4" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                    <Border BorderBrush="{StaticResource GridView_HeaderRowInnerBorder}" BorderThickness="1" Background="{TemplateBinding Background}"/>
                </Border>
                <telerik:DataCellsPresenter x:Name="PART_DataCellsPresenter" Grid.Column="3" telerik:StyleManager.Theme="{StaticResource Theme}"/>
                <Border x:Name="PART_IndicatorPresenter" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0,0,1,1" telerik:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical" Visibility="{TemplateBinding RowIndicatorVisibility}" Width="25">
                    <Border BorderThickness="1" Background="#FFCE3131">
                        <Border.BorderBrush>
                            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                <GradientStop Color="Black" Offset="0"/>
                                <GradientStop Color="#FF045AE5" Offset="1"/>
                            </LinearGradientBrush>
                        </Border.BorderBrush>
                    </Border>
                </Border>
                <telerik:IndentPresenter x:Name="PART_IndentPresenter" Grid.Column="1" ItemTemplate="{StaticResource GridViewHeaderIndentCellDataTemplate}" IndentLevel="{TemplateBinding IndentLevel}" MinHeight="{TemplateBinding MinHeight}" telerik:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical" telerik:StyleManager.Theme="{StaticResource Theme}"/>
                <Border x:Name="PART_HierarchyIndentPresenter" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0,0,1,1" Grid.Column="2" telerik:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical" Visibility="{Binding HasHierarchy, Converter={StaticResource BooleanToVisibilityConverter}, RelativeSource={RelativeSource TemplatedParent}}" Width="25">
                    <Border BorderBrush="{StaticResource GridView_HeaderInnerBorder}" BorderThickness="1" Background="{StaticResource GridView_HeaderBackground}"/>
                </Border>
            </telerik:SelectiveScrollingGrid>
        </ControlTemplate>
        <LinearGradientBrush x:Key="GridView_HeaderRowBackground" EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#FF5B5B5B" Offset="1"/>
            <GradientStop Color="#FF868686"/>
            <GradientStop Color="#FF4F4F4F" Offset="0.42"/>
            <GradientStop Color="#FF0E0E0E" Offset="0.43"/>
        </LinearGradientBrush>

        <Style x:Name="GridViewHeaderCellStyle" TargetType="telerik:GridViewHeaderCell">
            <Setter Property="Padding" Value="5"/>
            <Setter Property="Background">
                <Setter.Value>
                    <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                        <GradientStop Color="#FF8CB0D2" Offset="0.5"/>
                        <GradientStop Color="#FF45525B" Offset="1.0"/>
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
            <Setter Property="BorderBrush" Value="#FF477ABC" />
            <Setter Property="Foreground" Value="Black" />
            <Setter Property="BorderThickness" Value="0" />
        </Style>

        <SolidColorBrush x:Key="GridView_HeaderRowOuterBorder" Color="#FF848484"/>

        <Style x:Key="GridViewHeaderRowStyle1" TargetType="telerik:GridViewHeaderRow">
            <Setter Property="Template" Value="{StaticResource GridViewHeaderRowTemplate}"/>
            <!--<Setter Property="Background" Value="{StaticResource GridView_HeaderRowBackground}"/>-->
            <Setter Property="MinHeight" Value="27"/>
            <Setter Property="BorderBrush" Value="{StaticResource GridView_HeaderRowOuterBorder}"/>
            <Setter Property="BorderThickness" Value="1,0,0,1"/>
            <Setter Property="VerticalContentAlignment" Value="Stretch"/>
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            <Setter Property="Padding" Value="0"/>

            <Setter Property="Background">
                <Setter.Value>
                    <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                        <GradientStop Color="#FF8CB0D2" Offset="0.5"/>
                        <GradientStop Color="#FF45525B" Offset="1.0"/>
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
            <Setter Property="BorderBrush" Value="#FF477ABC" />
            <Setter Property="BorderThickness" Value="0" />
            <Setter Property="FontSize" Value="11" />
        </Style>




    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" Background="White" DataContext="{Binding Source={StaticResource SampleDataSource}}">

        <telerik:RadGridView HeaderRowStyle="{StaticResource  GridViewHeaderRowStyle1}" Margin="55,32,84,50" ItemsSource="{Binding Collection}"  RowIndicatorVisibility="Collapsed"  AutoGeneratingColumn="RadGridView_AutoGeneratingColumn">
            <telerik:RadGridView.GroupDescriptors>
                <telerik:GroupDescriptor Member="Property2" SortDirection="Ascending" />
            </telerik:RadGridView.GroupDescriptors>
        </telerik:RadGridView>
    </Grid>

</UserControl>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Telerik.Windows.Controls;

namespace SilverlightApplication173
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            // Required to initialize variables
            InitializeComponent();
        }


        private void RadGridView_AutoGeneratingColumn(object sender, GridViewAutoGeneratingColumnEventArgs e)
        {
                e.Column.HeaderCellStyle = this.Resources["GridViewHeaderCellStyle"] as Style;
        }
    }
}

[Vanya Pavlova]

Hi Vika,

 
Actually this part is called GridViewHeaderIndentCell and if you need to change its appearance you need to edit its template. I have prepared an example for you using the style above that demonstrates how to keep its background synchronized with GridViewHeaderRow's background. 


Please see the attached project and let me know if you need any further assistance.

All the best,
Vanya Pavlova
the Telerik team

[vika]

Exactly what I needed
appreciate your help very much