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
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
0
Accepted
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:
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.
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:
<
ResourceDictionary
xmlns
=
"http://schemas.microsoft.com/winfx/2006/xaml/presentation"
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?
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.
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
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.
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
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.
I hope this helps.
Regards,
Martin Ivanov
Progress Telerik
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.