changing the Funnel filter icon

6 posts, 1 answers
  1. Nick Polyak
    Nick Polyak avatar
    25 posts
    Member since:
    Jan 2010

    Posted 01 Feb 2010 Link to this post

    we are now in the process of choosing a WPF control set and Telerik is the front runner.
    One thing we would like to know is whether it is possible to easily change the funnel-like icon for the filter at the column header of GridView control. Some of the managers want to make sure that we are not going to be stuck with it.
  2. Answer
    Rossen Hristov
    Rossen Hristov avatar
    2478 posts

    Posted 02 Feb 2010 Link to this post

    Hi Nick Polyak,

    Although it is not very easy this can be achieved.

    You can edit the template of the GridViewHeaderCell and look for an element called PART_DistinctFilterControl of type FilteringDropDown. This is the control that holds the funnel.

    This custom control has a control template of its own. In the definition of this control you should define a new control template for it. You can get the original control template and modify it as needed. Here is the default template of the FilteringDropDown control:

        <LinearGradientBrush x:Key="GridViewIndicatorsPartsFill" EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#FF000000" Offset="0"/>
            <GradientStop Color="#FF000000" Offset="1"/>
    <SolidColorBrush x:Key="DistinctFilterActiveFunnelFill" Color="#FFFADCA5" />
    <SolidColorBrush x:Key="DistinctFilterFunnelFill" Color="#FF535353" />
    <SolidColorBrush x:Key="GridViewForeground" Color="#FF000000" />
        <!-- FilteringDropDown -->
        <ControlTemplate TargetType="grid:FilteringDropDown" x:Key="DistinctFilterControlTemplate">
                <ToggleButton x:Name="PART_DropDownButton" Width="20" Height="20">
                        <ControlTemplate TargetType="ToggleButton">
                            <ContentPresenter />
                    <Grid Width="11" Height="12" Background="Transparent">
                        <Path Fill="{StaticResource GridViewIndicatorsPartsFill}" Stretch="Fill" Width="11" Height="12" Data="M0,0 L11,0 11,1 10,1 10,2 9,2 9,3 8,3 8,3.9999999 7,3.9999999 7,12 4,12 4,3.9999999 3.0000001,3.9999999 3.0000001,3 2,3 2,2 1,2 1,1 0,1 z"/>
                        <Grid Width="11"
                              Visibility="{TemplateBinding FunnelFillVisibility}">
                            <Path Fill="{StaticResource DistinctFilterActiveFunnelFill}" Stretch="Fill" 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" Margin="3.016,1.016,2.984,0" VerticalAlignment="Top" Height="3" RenderTransformOrigin="0.5,0.5">
                                        <ScaleTransform ScaleX="1" ScaleY="1"/>
                                        <SkewTransform AngleX="0" AngleY="0"/>
                                        <RotateTransform Angle="0"/>
                                        <TranslateTransform X="0" Y="0"/>
                            <Path Fill="{StaticResource DistinctFilterFunnelFill}" Stretch="Fill" Data="M2.9999999,0.99999994 L2.9999999,2 3.9999999,2 3.9999999,3 4.9999999,3 4.9999999,4 5.9999999,4 5.9999999,3 6.9999999,3 6.9999999,2 7.9999999,2 7.9999999,0.99999994 6.9999999,0.99999994 5.9999999,0.99999994 4.9999999,0.99999994 3.9999999,0.99999994 z M0,0 L11,0 11,0.99999994 9.9999999,0.99999994 9.9999999,2 8.9999999,2 8.9999999,3 7.9999999,3 7.9999999,4 6.9999999,4 6.9999999,12 3.9999999,12 3.9999999,4 2.9999999,4 2.9999999,3 1.9999999,3 1.9999999,2 0.99999994,2 0.99999994,0.99999994 0,0.99999994 z"/>
                <Popup x:Name="PART_DropDownPopup">
        <Style TargetType="grid:FilteringDropDown"
            x:Key="{telerik:ThemeResourceKey ThemeType=telerik:Office_BlackTheme, ElementType=grid:FilteringDropDown}"
            <Setter Property="Template" Value="{StaticResource DistinctFilterControlTemplate}"/>
            <Setter Property="Foreground" Value="{StaticResource GridViewForeground}" />
            <Setter Property="FontWeight" Value="Normal" />

    The toggle button above is the funnel. You can replace it with another toggle button or simply edit its template.

    To learn more about styling RadGridView, please read this help article. I hope this helps.

    Best wishes,
    the Telerik team

    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
    Follow the status of features or bugs in PITS and vote for them to affect their priority.
  3. Nick Polyak
    Nick Polyak avatar
    25 posts
    Member since:
    Jan 2010

    Posted 02 Feb 2010 Link to this post

    thanks for your prompt answer.
    How do I get the  the template of the GridViewHeaderCell?
  4. Nick Polyak
    Nick Polyak avatar
    25 posts
    Member since:
    Jan 2010

    Posted 02 Feb 2010 Link to this post

    I am all set thank you!
  5. Philip
    Philip avatar
    70 posts
    Member since:
    Apr 2008

    Posted 23 Apr 2010 Link to this post

    Would it be possible when you run across a solution, that you post the solution instead of just saying "I am all set".

    I have the same issue you were inquiring about and would love to know how you fixed it.

    I dont mean to be harping, just would love to know how you found that.
  6. Rossen Hristov
    Rossen Hristov avatar
    2478 posts

    Posted 23 Apr 2010 Link to this post

    Hello Philip,

    Here is the overview for styling RadGridView.

    This help topic can help you get started with the GridViewHeaderCell template.

    Finally, this is the template structure of the header cell.

    By following this tutorials you should be able to modify the header cell template.

    Let us know if there are problems or if you have any specific questions.

    Best wishes,
    the Telerik team

    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 Public Issue Tracking system and vote to affect the priority of the items.
Back to Top