This is a migrated thread and some comments may be shown as answers.

changing the Funnel filter icon

8 Answers 365 Views
GridView
This is a migrated thread and some comments may be shown as answers.
Nick Polyak
Top achievements
Rank 1
Nick Polyak asked on 02 Feb 2010, 02:29 AM
Hi
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.
Thanks
Nick

8 Answers, 1 is accepted

Sort by
0
Accepted
Rossen Hristov
Telerik team
answered on 02 Feb 2010, 12:16 PM
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:

                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:input="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Input"
                     
                 
                    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"    
                    xmlns:grid="clr-namespace:Telerik.Windows.Controls.GridView"
                    xmlns:controls="clr-namespace:Telerik.Windows.Controls"
                 
                 
             
                    >
 
     
    <LinearGradientBrush x:Key="GridViewIndicatorsPartsFill" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FF000000" Offset="0"/>
        <GradientStop Color="#FF000000" Offset="1"/>
    </LinearGradientBrush>
<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">
        <Grid>
 
            <ToggleButton x:Name="PART_DropDownButton" Width="20" Height="20">
                <ToggleButton.Template>
                    <ControlTemplate TargetType="ToggleButton">
                        <ContentPresenter />
                    </ControlTemplate>
                </ToggleButton.Template>
                <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"
                          Height="12"
                          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">
                            <Path.RenderTransform>
                                <TransformGroup>
                                    <ScaleTransform ScaleX="1" ScaleY="1"/>
                                    <SkewTransform AngleX="0" AngleY="0"/>
                                    <RotateTransform Angle="0"/>
                                    <TranslateTransform X="0" Y="0"/>
                                </TransformGroup>
                            </Path.RenderTransform>
                        </Path>
                        <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"/>
                    </Grid>
                </Grid>
            </ToggleButton>
 
            <Popup x:Name="PART_DropDownPopup">
               
              <Popup.StaysOpen>False</Popup.StaysOpen>
             
                    
            </Popup>
           
         </Grid>
    </ControlTemplate>
 
    <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" />
    </Style>
     
     
</ResourceDictionary>

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,
Ross
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.
0
Nick Polyak
Top achievements
Rank 1
answered on 02 Feb 2010, 04:16 PM
thanks for your prompt answer.
How do I get the  the template of the GridViewHeaderCell?
0
Nick Polyak
Top achievements
Rank 1
answered on 02 Feb 2010, 05:09 PM
I am all set thank you!
0
Philip
Top achievements
Rank 1
answered on 23 Apr 2010, 02:47 PM
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.
0
Rossen Hristov
Telerik team
answered on 23 Apr 2010, 03:20 PM
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,
Ross
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.
0
Dante
Top achievements
Rank 1
answered on 27 Apr 2018, 04:49 AM

Hi, how can I change the funnel icon with my own icon?

I found the code block below on one of the answers but not sure where to insert the .jpg path that I have.

Thanks in advance.

<ControlTemplate x:Key="DistinctFilterControlTemplate" TargetType="telerik:FilteringDropDown">
        <Grid>
            <Grid.Resources>
            </Grid.Resources>
 
            <ToggleButton x:Name="PART_DropDownButton"
                                  Width="20"
                                  Height="20"
                                  Background="Red"
                                  >
                <ToggleButton.Template>
                    <ControlTemplate TargetType="ToggleButton">
                        <ContentPresenter />
                    </ControlTemplate>
                </ToggleButton.Template>
                <Grid Width="11" Height="12" Background="Transparent">
 
                    <Path Fill="{StaticResource GridViewIndicatorsPartsFill}"     
                         Stretch="Fill"     
                         Width="4"     
                         Height="4"     
                         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"     
                          Height="12"     
                          Visibility="{TemplateBinding FilteringIndicatorVisibility}">
                        <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">
                            <Path.RenderTransform>
                                <TransformGroup>
                                    <ScaleTransform ScaleX="1" ScaleY="1"/>
                                    <SkewTransform AngleX="0" AngleY="0"/>
                                    <RotateTransform Angle="0"/>
                                    <TranslateTransform X="0" Y="0"/>
                                </TransformGroup>
                            </Path.RenderTransform>
                        </Path>
                        <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"/>
                    </Grid>
                </Grid>
            </ToggleButton>
            <Popup x:Name="PART_DropDownPopup">
                <Popup.StaysOpen>False</Popup.StaysOpen
            </Popup>   
        </Grid>   
    </ControlTemplate>

 

0
KR
Top achievements
Rank 1
Veteran
answered on 17 Apr 2019, 07:44 PM
Was anyone able to change the  funnel icon with my own icon? Please share the code. I'm using Windows8 theme.
0
Martin Ivanov
Telerik team
answered on 18 Apr 2019, 07:11 AM
Hello,

To replace the funnel icon, you can extract the ControlTemplate of the FilteringDropDown control and modify it a bit. Basically, you can remove the Grid that holds the two Path elements (drawing the default icon) and add a custom element that shows your icon. To apply the custom template you can use an implicit style.

I've extracted and modified the template from the Windows8 theme. The template is using RadGlyph now, instead of the default Path elements.
<Window.Resources>
    <ControlTemplate TargetType="telerik:FilteringDropDown" x:Key="DistinctFilterControlTemplate">
        <Grid>
            <Button x:Name="PART_DropDownButton">
                <Button.Template>
                    <ControlTemplate TargetType="Button">
                        <ContentPresenter/>
                    </ControlTemplate>
                </Button.Template>
                <Border Cursor="Hand" MinWidth="22" Background="Transparent">
                    <telerik:RadGlyph FontSize="16" Glyph="" Foreground="{TemplateBinding Foreground}" />                     
                </Border>
            </Button>
            <Popup x:Name="PART_DropDownPopup" StaysOpen="True" AllowsTransparency="True" PopupAnimation="Slide"/>
        </Grid>
    </ControlTemplate>
    <Style TargetType="telerik:FilteringDropDown">
        <Setter Property="Template" Value="{StaticResource DistinctFilterControlTemplate}"/>
    </Style>
</Window.Resources>

I hope this helps.

Regards,
Martin Ivanov
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
GridView
Asked by
Nick Polyak
Top achievements
Rank 1
Answers by
Rossen Hristov
Telerik team
Nick Polyak
Top achievements
Rank 1
Philip
Top achievements
Rank 1
Dante
Top achievements
Rank 1
KR
Top achievements
Rank 1
Veteran
Martin Ivanov
Telerik team
Share this question
or