Grid Sort Icons - How to change

[Chris]

The grid control, is there an example of template the grid header, I wish to put in my own vector image for the sort Icons?

[Vanya Pavlova]

Hello Chris,

 


You should predefine the template of GridViewHeaderCell using Expression Blend and change the PART_SortIndicator which represents the sort indicator icon of the header. This element is of type Path, however you may easily change this with an Image based on your needs.
If you need sample project I will be glad to prepare a small demo, which illustrates this approach. 
 

Regards,
Vanya Pavlova
the Telerik team

[Ankur]

Please sent demo Project

[Vlad]

Hi,

 Have you tried to modify the header cell template with Blend? Do you have any particular questions?

Kind regards,
Vlad
the Telerik team

[Ankur]

Hi
I want to change sort indicator position from top to right side and also need to increase a size of sort indicator In WPF So please you send me some demo project regarding to this requirement.

[Vlad]

Hello,

 If you want to change it you should use Blend. Have you tried that?

Kind regards,
Vlad
the Telerik team

[Ankur]

Yes actually i use blend and  code generated by blend is given below but Sort indicator not visible after this code......


<ControlTemplate x:Key="GridViewHeaderCellTemplate" TargetType="telerikGridView:GridViewHeaderCell">
        <Grid x:Name="PART_HeaderCellGrid">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="CommonStates">
                    <VisualStateGroup.Transitions>
                        <VisualTransition GeneratedDuration="00:00:00.2000000" To="Normal"/>
                        <VisualTransition GeneratedDuration="00:00:00.2000000" To="MouseOver"/>
                    </VisualStateGroup.Transitions>
                    <VisualState x:Name="Normal"/>
                    <VisualState x:Name="MouseOver">
                        <Storyboard>
                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="GridViewHeaderCell_Over">
                                <EasingDoubleKeyFrame KeyTime="0:0:0" Value="1"/>
                            </DoubleAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource GridView_HeaderForeground_Selected}"/>
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                    <VisualState x:Name="Ascending">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource GridView_HeaderForeground_Selected}"/>
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PART_SortIndicator">
                                <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="1"/>
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="GridViewHeaderCell_Selected">
                                <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="1"/>
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                    <VisualState x:Name="Descending">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource GridView_HeaderForeground_Selected}"/>
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PART_SortIndicator">
                                <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="1"/>
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="RenderTransform" Storyboard.TargetName="PART_SortIndicator">
                                <DiscreteObjectKeyFrame KeyTime="0:0:0">
                                    <DiscreteObjectKeyFrame.Value>
                                        <ScaleTransform ScaleY="1" ScaleX="1"/>
                                    </DiscreteObjectKeyFrame.Value>
                                </DiscreteObjectKeyFrame>
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="GridViewHeaderCell_Selected">
                                <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="1"/>
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
            <Border x:Name="GridViewHeaderCell" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Grid.ColumnSpan="2">
                <Border BorderBrush="{StaticResource GridView_HeaderInnerBorder}" BorderThickness="1,0,0,0" Background="{TemplateBinding Background}"/>
            </Border>
            <Border x:Name="GridViewHeaderCell_Over" BorderBrush="{StaticResource GridView_HeaderOuterBorder_Over}" BorderThickness="{TemplateBinding BorderThickness}" Grid.ColumnSpan="2" Opacity="0">
                <Border BorderBrush="{StaticResource GridView_HeaderInnerBorder_Over}" BorderThickness="1,0,0,0" Background="{StaticResource GridView_HeaderBackground_Over}"/>
            </Border>
            <Border x:Name="GridViewHeaderCell_Selected" BorderBrush="{StaticResource GridView_HeaderOuterBorder_Selected}" BorderThickness="{TemplateBinding BorderThickness}" Grid.ColumnSpan="2" Opacity="0">
                <Border BorderBrush="{StaticResource GridView_HeaderInnerBorder_Selected}" BorderThickness="1,0,0,0" Background="{StaticResource GridView_HeaderBackground_Selected}"/>
            </Border>
            <ContentControl x:Name="ContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Grid.Column="0" Foreground="{TemplateBinding Foreground}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" Style="{StaticResource StretchedContentControl}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>-->
            <Path x:Name="PART_SortIndicator" Grid.ColumnSpan="2" Data="M0,0 L1,0 2,0 3,0 4,0 5,0 5,1 4,1 4,2 3,2 3,3 2,3 2,2 1,2 1,1 0,1 0,0 z" Fill="{StaticResource GridView_SortIndicatorColor}" HorizontalAlignment="Right" Height="5" Margin="0,3,0,0" Opacity="0" RenderTransformOrigin=".5,.5" Stretch="Fill" VerticalAlignment="Center" Width="7">
                <Path.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform ScaleY="-1" ScaleX="1"/>
                        <SkewTransform AngleY="0" AngleX="0"/>
                        <RotateTransform Angle="0" />
                        <TranslateTransform X="0" Y="0"/>
                    </TransformGroup>
                </Path.RenderTransform>
            </Path>
            <telerikGridView:FilteringDropDown x:Name="PART_DistinctFilterControl" Grid.Column="1" Margin="0,0,8,0" telerik:StyleManager.Theme="{StaticResource Theme}" Visibility="{TemplateBinding FilteringUIVisibility}"/>
            <Thumb x:Name="PART_LeftHeaderGripper" Grid.ColumnSpan="2" HorizontalAlignment="Left" Style="{StaticResource ColumnHeaderGripperStyle}"/>
            <Thumb x:Name="PART_RightHeaderGripper" Grid.ColumnSpan="2" HorizontalAlignment="Right" Style="{StaticResource ColumnHeaderGripperStyle}"/>
        </Grid>
    </ControlTemplate>

Please look this code and suggest me where i am wrong...................
Thanks in advance........

[Ankur]

Hi
I want to change sort indicator position from top to right side and also need to increase a size of sort indicator In RadGridView in  WPF. I used bland for this and use PART_HeaderCellGrid but after use this option sort indicator is not visible so please can you tell me what is the problem..............

[Vanya Pavlova]

Hello Ankur,

 


I have tried to replicate the behavior you described, however with no avail. Generally if you want to move the indicator to the right, you should set its HorizontalAlignment property to Right, increase the size using Width/Height and some Margin might be of help.  I have prepared small sample demo which illustrates how this can be achieved. Will you verify how the attached project differs from yours? 

Greetings,
Vanya Pavlova
the Telerik team

[Ankur]

HI Vanya Pavlova  ,
Problem is this after applying this control template every thing is fine but sort indicator is not visible.......................

[Ankur]

HI Vanya Pavlova  , 

Problem is solved I changed the position of sort indicator from top to right and increase width and height but the sort indicator image in blurred. so is there any solution for this?

[Vanya Pavlova]

Hi Ankur,

 


Can you please elaborate a bit more what do you mean by "blurred"? Any relevant code-snippet will be highly appreciated as well. 

All the best,
Vanya Pavlova
the Telerik team

[Ankur]

HI Vanya Pavlova  , 
I send you sort png file. Image is not clear pixel is blurred of sort Icon. so there is any way that i fix it.. 

[Vanya Pavlova]

Hello Ankur,

 


Thank you for sharing this picture with us! When you increase the Width/Height properties of the sort icon the Path Data responsible for the sort indicator should be changed. I have modified it and you may see the result at the attached project. Can you verify how this works for you? 

Regards,
Vanya Pavlova
the Telerik team

[Ankur]

HI Vanya Pavlova  ,  
Thanks for your demo project problem is solved.....

[Don]

Ankur: I too am trying to move the sort indicator from the top to the right.  I copied the same template and the sort indicator is not visible. What did you do to make it visible?

[prathibha]

I want to Increase Column sort index size (whose size is set to 7 by parent element in GridViewHeaderCellTemplate) In GridView in  WPF. Pls suggest any solution

[Vanya Pavlova]

Hi Prathibha,



Have you checked the referred example?


Regards,
Vanya Pavlova
Telerik

[prathibha]

Hi pavlova,

ya i referred to your previous example. But it doesn't include column sort index. Its about sort icon.

When you set the property ShowColumnSortIndexes="True" , the displayed sort index has font size 7. i need to increase its font size.

​

[prathibha]

find the below attached screen shot... i need to increase the fontsize of this sort index

[Vanya Pavlova]

Hi Prathibha,


ColumnSortIndex could be modified via predefining the template of GridViewHeaderCell. 
There you will find a ContentControl, which that is responsible for displaying these indexes, please check the markup below:

<ContentControl
                        Content="{Binding SortingIndex, Converter={StaticResource SortingIndexConverter},RelativeSource={RelativeSource TemplatedParent}}"
                        Visibility="{Binding SortingIndex, Converter={StaticResource SortingIndexToVisibilityConverter},RelativeSource={RelativeSource TemplatedParent}}"
                        Grid.ColumnSpan="2" FontSize="7" IsTabStop="{TemplateBinding IsTabStop}"
                        Foreground="{StaticResource GridView_SortIndicatorColor}" HorizontalAlignment="Center"
                        VerticalAlignment="Top" Margin="14,0,0,0" />

Once you have changed this setting within the template, you may apply it globally to the columns via implicit style targeted at GridViewHeaderCell. 


Regards,
Vanya Pavlova
Telerik

[prathibha]

Hi Pavlova,

Thanks for the help.