FilteringDropDown

[shirley wang]

Dear People,

In GridView if one column is filtered, the filter symbol will be filled with the color orange. I want to change the color to red. I know that in such case the header cell template must be edited. My question is where can i get this template source xaml code? and i want one for Office_Blue theme.  Thank you very much !!

Best wishes

Shirley

[Vanya Pavlova]

Hello shirley wang,

In order to change the filter symbol when the column is filtered you should edit the template of the DistinctFilterControlTemplate within the GridViewHeaderCell template-if you want to change the standart  orange colour you should edit the GridView_FilterIconBackground_Filtered to Red.
I am sending you an example that demonstrates such a behaviour.

Best wishes,
Vanya Pavlova
the Telerik team

[Sébastien]

Hello,

Is there a way we can set this code in a ResourceDictionnary file instead of the .Resource part of the XAML file.

I already have one ResourceDictionnary for my RadGridView and would like to add the code to modify the style of the funnel within this file.

I must be doing something wrong because I am unable to see the funel icon when adding the complete code in my RadGridView ResourceDictionnary.

Can you assist with that?

If so I an sending the code of the ResourceDictionnary.

Regards

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
    xmlns:helper="clr-namespace:ExceldorERP.Helpers.TelerikHlp">

    <!-- *** Brosse *** -->
    <SolidColorBrush x:Key="GridView_HeaderInnerBorder" Color="#FF4B4B4B"/>
    <SolidColorBrush x:Key="GridView_HeaderOuterBorder_Over" Color="#FFFFC92B"/>
    <SolidColorBrush x:Key="GridView_HeaderInnerBorder_Over" Color="White"/>
    <LinearGradientBrush x:Key="GridView_HeaderBackground_Over" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FFFFFBA3" Offset="1"/>
        <GradientStop Color="#FFFFFBDA" Offset="0"/>
        <GradientStop Color="#FFFFD25A" Offset="0.43"/>
        <GradientStop Color="#FFFEEBAE" Offset="0.42"/>
    </LinearGradientBrush>
    <LinearGradientBrush x:Key="GridView_HeaderOuterBorder_Selected" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FF616161" Offset="0"/>
        <GradientStop Color="#FF989898" Offset="1"/>
    </LinearGradientBrush>
    <LinearGradientBrush x:Key="GridView_HeaderInnerBorder_Selected" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FFB69A78"/>
        <GradientStop Color="#FFFFE17A" Offset="0.126"/>
    </LinearGradientBrush>
    <LinearGradientBrush x:Key="GridView_HeaderBackground_Selected" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FFFFD74E" Offset="0.996"/>
        <GradientStop Color="#FFFFDCAB" Offset="0.17"/>
        <GradientStop Color="#FFFFB062" Offset="0.57"/>
        <GradientStop Color="#FFFFD18F" Offset="0.56"/>
        <GradientStop Color="#FFFFBA74"/>
    </LinearGradientBrush>
    <Style x:Key="StretchedContentControl" TargetType="ContentControl">
        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
        <Setter Property="VerticalContentAlignment" Value="Stretch"/>
    </Style>
    <SolidColorBrush x:Key="GridView_SortIndicatorColor" Color="Black"/>
    <telerik:Office_BlackTheme x:Key="Theme"/>
    <Style x:Key="ColumnHeaderGripperStyle" TargetType="Thumb">
        <Setter Property="Width" Value="8"/>
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="BorderBrush" Value="Transparent"/>
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
        <Setter Property="VerticalContentAlignment" Value="Stretch"/>
        <Setter Property="Padding" Value="0"/>
        <Setter Property="Cursor" Value="SizeWE"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Thumb">
                    <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <SolidColorBrush x:Key="GridView_HeaderForeground_Selected" Color="Black"/>
    <SolidColorBrush x:Key="GridView_FilterIconOuterBorder" Color="Black"/>
    <SolidColorBrush x:Key="GridView_FilterIconTopBorder" Color="White"/>
    <LinearGradientBrush x:Key="GridView_FilterIconBackground" EndPoint="0,0.5" StartPoint="1,0.5">
        <GradientStop Color="#FF353535" Offset="0"/>
        <GradientStop Color="White" Offset="0.8"/>
    </LinearGradientBrush>
    <LinearGradientBrush x:Key="GridView_FilterIconBackground_Filtered" EndPoint="0,0.5" StartPoint="1,0.5">
        <GradientStop Color="#FFFF7300" Offset="0"/>
        <GradientStop Color="#FFFFF400" Offset="0.8"/>
    </LinearGradientBrush>
    <SolidColorBrush x:Key="GridView_FilterIconInnerBorder" Color="#FF5B5B5B"/>
    <LinearGradientBrush x:Key="GridView_HeaderBackground" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FF5B5B5B" Offset="1"/>
        <GradientStop Color="#FF868686"/>
        <GradientStop Color="#FF4F4F4F" Offset="0.42"/>
        <GradientStop Color="#FF0E0E0E" Offset="0.43"/>
    </LinearGradientBrush>
    <SolidColorBrush x:Key="GridView_HeaderOuterBorder" Color="#FF848484"/>
    <SolidColorBrush x:Key="GridView_HeaderForeground" Color="White"/>

    <!-- *** Styles par défaut d'une RadGridView *** -->
    <Style x:Key="GridViewGroupRowDefaultStyle" TargetType="telerik:GridViewGroupRow">
        <Setter Property="ShowHeaderAggregates" Value="False" />
    </Style>

    <Style x:Key="GridViewGroupPanelDefaultStyle" TargetType="telerik:GridViewGroupPanel" >
    </Style>

    <Style x:Key="RadGridViewDefaultStyle" TargetType="telerik:RadGridView">
        <Setter Property="AutoExpandGroups" Value="False" />
        <Setter Property="AutoGenerateColumns" Value="False" />
        <Setter Property="GroupRowStyle" Value="{StaticResource GridViewGroupRowDefaultStyle}" />
        <Setter Property="ShowColumnHeaders" Value="True" />
        <Setter Property="GroupPanelStyle" Value="{StaticResource GridViewGroupPanelDefaultStyle}" />
        <Setter Property="helper:GridViewMenu.IsMenuEnabled" Value="True" />
    </Style>

    <!-- *** Style par défaut pour modifier le header ***-->

    <Style x:Key="DistinctFilterControlTemplate" TargetType="telerik:FilteringDropDown">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="telerik:FilteringDropDown">
                    <Grid>
                        <ToggleButton x:Name="PART_DropDownButton" Height="20" Width="20">
                            <ToggleButton.Template>
                                <ControlTemplate TargetType="ToggleButton">
                                    <!--<Grid>
                                        <Image Source="/ExceldorERP;component/Assets/Images/icone_filtre.png"/>
                                    </Grid>-->
                                    <ContentPresenter/>
                                </ControlTemplate>
                            </ToggleButton.Template>
                        </ToggleButton>
                        <Border Background="Transparent" Cursor="Hand" Padding="3,0,0,0">
                            <Grid Cursor="Hand" Height="13" Width="12">
                                <Path Data="M5,9 L6,9 6,10 5,10 z M4,4 L5,4 5,5 5,6 5,7 5,8 5,9 4,9 4,8 4,7 4,6 4,5 z M7.9850001,3 L8.985,3 8.985,4 8,4 8,5 8,6 8,7 8,8 8,9 8,10 8,11 7.9999997,12 6.9999998,12 6.9999998,11 6,11 6,10 6.9999999,10 6.9999999,9 6.9999999,8 6.9999999,7 6.9999999,6 6.9999999,5 6.9999999,4 7.9850001,4 z M3,3 L4,3 4,4 3,4 z M9,2 L10,2 10,3 9,3 z M2,2 L3,2 3,3 2,3 z M7.9999999,0 L9,0 10,0 11,0 12,0 12,1 11,1 11,2 10,2 10,1 9,1 7.9999999,1 z M0,0 L1,0 2,0 3,0 4,0 5,0 6,0 6.9999998,0 7.9999997,0 7.9999997,1 6.9999998,1 6,1 5,1 4,1 3,1 2,1 2,2 1,2 1,1 0,1 z" Margin="0,1,0,0" Stretch="Fill" Fill="#FFEB1616"/>
                                <Path Data="M0,0 L1,0 2,0 3.0000002,0 4.0000002,0 5.0000001,0 5.9850001,0 6.0000001,0 6.9850001,0 7.9850001,0 7.9850001,1 6.9850001,1 6.0000001,1 5.9850001,1 5.0000001,1 4.0000002,1 3.0000002,1 2,1 1,1 0,1 z" Height="1" Margin="2,1,2,0" Stretch="Fill" VerticalAlignment="Top" Fill="#FFDA0F0F"/>
                                <Path Data="M0,0 L1,0 2,0 3,0 4,0 5,0 6,0 6,1 5,1 4.985,1 4.985,2 4,2 4,3 4,4 4,5 4,6 4,7 4,8 3,8 3,7 2,7 2,6 2,5 2,4 2,3 2,2 1,2 1,1 0,1 z" Fill="{StaticResource GridView_FilterIconBackground}" Margin="3,2,3,3" Stretch="Fill"/>
                                <Path Data="M0,0 L1,0 2,0 3,0 4,0 5,0 6,0 6,1 5,1 4.985,1 4.985,2 4,2 4,3 4,4 4,5 4,6 4,7 4,8 3,8 3,7 2,7 2,6 2,5 2,4 2,3 2,2 1,2 1,1 0,1 z" Fill="#FFE41C1C" Margin="3,2,3,3" Stretch="Fill" Visibility="{TemplateBinding FunnelFillVisibility}"/>
                                <Path Data="M5,9 L6,9 6,10 5,10 z M4,4 L5,4 5,5 5,6 5,7 5,8 5,9 4,9 4,8 4,7 4,6 4,5 z M7.9850001,3 L8.985,3 8.985,4 8,4 8,5 8,6 8,7 8,8 8,9 8,10 8,11 7.9999997,12 6.9999998,12 6.9999998,11 6,11 6,10 6.9999999,10 6.9999999,9 6.9999999,8 6.9999999,7 6.9999999,6 6.9999999,5 6.9999999,4 7.9850001,4 z M3,3 L4,3 4,4 3,4 z M9,2 L10,2 10,3 9,3 z M2,2 L3,2 3,3 2,3 z M7.9999999,0 L9,0 10,0 11,0 12,0 12,1 11,1 11,2 10,2 10,1 9,1 7.9999999,1 z M0,0 L1,0 2,0 3,0 4,0 5,0 6,0 6.9999998,0 7.9999997,0 7.9999997,1 6.9999998,1 6,1 5,1 4,1 3,1 2,1 2,2 1,2 1,1 0,1 z" Fill="{StaticResource GridView_FilterIconInnerBorder}" Margin="0,0,0,1" Stretch="Fill"/>
                            </Grid>
                        </Border>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="FilteringDropDownStyle" TargetType="telerik:FilteringDropDown">
        <Setter Property="Template" Value="{StaticResource DistinctFilterControlTemplate}"/>
    </Style>

    <Style x:Key="GridViewHeaderCellTemplate" TargetType="telerik:GridViewHeaderCell">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="telerik: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" 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" 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" 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}" IsTabStop="{TemplateBinding IsTabStop}" 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="Center" Height="3" Margin="0,3,0,0" Opacity="0" RenderTransformOrigin=".5,.5" Stretch="Fill" VerticalAlignment="Top" Width="5">
                            <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>
                        <telerik:FilteringDropDown x:Name="PART_DistinctFilterControl" Grid.Column="1" Margin="0,0,8,0" telerik:StyleManager.Theme="{StaticResource Theme}" Visibility="{TemplateBinding FilteringUIVisibility}" Style="{StaticResource FilteringDropDownStyle}"/>
                        <Thumb x:Name="PART_LeftHeaderGripper" Grid.ColumnSpan="2" HorizontalAlignment="Left" IsTabStop="{TemplateBinding IsTabStop}" Style="{StaticResource ColumnHeaderGripperStyle}"/>
                        <Thumb x:Name="PART_RightHeaderGripper" Grid.ColumnSpan="2" HorizontalAlignment="Right" IsTabStop="{TemplateBinding IsTabStop}" Style="{StaticResource ColumnHeaderGripperStyle}"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <!-- Style implicite -->
    <Style TargetType="telerik:RadGridView" BasedOn="{StaticResource RadGridViewDefaultStyle}"/>
    <Style TargetType="telerik:FilteringDropDown" BasedOn="{StaticResource FilteringDropDownStyle}"/>
    <Style TargetType="telerik:GridViewHeaderCell" BasedOn="{StaticResource GridViewHeaderCellTemplate}"/>

    <!-- *** -->

</ResourceDictionary>

[Vanya Pavlova]

Hello Sébastien,

 


I have updated your project and now you can see the FilteringDropDown control within your style, residing within a separate ResourceDictionary.


Please check this and let me know if you need any further assistance.

Kind regards,
Vanya Pavlova
the Telerik team

[Sébastien]

Thanks a million,

It works just fine.

Regards