Grid Sort Icons - How to change

22 posts, 0 answers
  1. Chris
    Chris avatar
    2 posts
    Member since:
    Sep 2011

    Posted 07 Oct 2011 Link to this post

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

    Posted 07 Oct 2011 Link to this post

    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

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  3. Ankur
    Ankur avatar
    9 posts
    Member since:
    Aug 2012

    Posted 14 Aug 2012 Link to this post

    Please sent demo Project
  4. Vlad
    Admin
    Vlad avatar
    11100 posts

    Posted 14 Aug 2012 Link to this post

    Hi,

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

    Kind regards,
    Vlad
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  5. Ankur
    Ankur avatar
    9 posts
    Member since:
    Aug 2012

    Posted 14 Aug 2012 Link to this post

    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.
  6. Vlad
    Admin
    Vlad avatar
    11100 posts

    Posted 14 Aug 2012 Link to this post

    Hello,

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

    Kind regards,
    Vlad
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  7. Ankur
    Ankur avatar
    9 posts
    Member since:
    Aug 2012

    Posted 14 Aug 2012 Link to this post

    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........
  8. Ankur
    Ankur avatar
    9 posts
    Member since:
    Aug 2012

    Posted 14 Aug 2012 Link to this post

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

    Posted 14 Aug 2012 Link to this post

    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

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  10. Ankur
    Ankur avatar
    9 posts
    Member since:
    Aug 2012

    Posted 16 Aug 2012 Link to this post

    HI Vanya Pavlova  ,
    Problem is this after applying this control template every thing is fine but sort indicator is not visible.......................
  11. Ankur
    Ankur avatar
    9 posts
    Member since:
    Aug 2012

    Posted 11 Sep 2012 Link to this post

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

    Posted 11 Sep 2012 Link to this post

    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

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  13. Ankur
    Ankur avatar
    9 posts
    Member since:
    Aug 2012

    Posted 11 Sep 2012 Link to this post

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

    Posted 11 Sep 2012 Link to this post

    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

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  15. Ankur
    Ankur avatar
    9 posts
    Member since:
    Aug 2012

    Posted 13 Sep 2012 Link to this post

    HI Vanya Pavlova  ,  
    Thanks for your demo project problem is solved.....
  16. Don
    Don avatar
    31 posts
    Member since:
    Aug 2012

    Posted 14 Sep 2012 Link to this post

    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?
  17. prathibha
    prathibha avatar
    4 posts
    Member since:
    Jun 2015

    Posted 04 Jun 2015 Link to this post

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

    Posted 08 Jun 2015 Link to this post

    Hi Prathibha,



    Have you checked the referred example?


    Regards,
    Vanya Pavlova
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  19. prathibha
    prathibha avatar
    4 posts
    Member since:
    Jun 2015

    Posted 09 Jun 2015 in reply to Vanya Pavlova Link to this post

    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.



  20. prathibha
    prathibha avatar
    4 posts
    Member since:
    Jun 2015

    Posted 09 Jun 2015 Link to this post

    find the below attached screen shot... i need to increase the fontsize of this sort index
  21. Vanya Pavlova
    Admin
    Vanya Pavlova avatar
    2019 posts

    Posted 12 Jun 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  22. prathibha
    prathibha avatar
    4 posts
    Member since:
    Jun 2015

    Posted 21 Jun 2015 in reply to Vanya Pavlova Link to this post

    Hi Pavlova,

    Thanks for the help.

Back to Top