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

FilteringDropDown

4 Answers 164 Views
GridView
This is a migrated thread and some comments may be shown as answers.
shirley wang
Top achievements
Rank 1
shirley wang asked on 27 Jul 2010, 08:22 AM
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

4 Answers, 1 is accepted

Sort by
0
Vanya Pavlova
Telerik team
answered on 27 Jul 2010, 10:32 AM
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
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
Sébastien
Top achievements
Rank 1
answered on 05 May 2011, 07:31 PM
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: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>

0
Vanya Pavlova
Telerik team
answered on 09 May 2011, 07:47 AM
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
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
Sébastien
Top achievements
Rank 1
answered on 09 May 2011, 06:08 PM
Thanks a million,

It works just fine.

Regards
Tags
GridView
Asked by
shirley wang
Top achievements
Rank 1
Answers by
Vanya Pavlova
Telerik team
Sébastien
Top achievements
Rank 1
Share this question
or