Adjust filter icon for active grid filter.

[Dominic]

Hello,

 

a lot of our users have problems to identify the active filters (look attached screenshot, this is from a real support case we got).

We use the Windows7 theme from Telerik and the active filter icon is only a little more blue than the inactive.

We have a lot suport cases where users did not recognize that they filtered the grid and claim missing/lost data.

Is it possible to colorize the active filter (red). I assume it is in the theme, but I did not find the proper key.

 

Can you help me?

[Dominic]

Is it "GridView_FilterIconBackground_Filtered"?

[Dominic]

Is it "GridView_FilterIconBackground_Filtered" ? 

[Dilyan Traykov]

Hello Dominic,

Modifying the default style of the FilteringDropDown control has been documented in our Modifying Default Styles article.

For your convenience, I've modified the default ControlTemplate of the control and set a red gradient for the filtering icon. Here's the style itself:

<Style TargetType="{x:Type telerik:FilteringDropDown}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type telerik:FilteringDropDown}">
                <Grid>
                    <Button x:Name="PART_DropDownButton">
                        <Button.Template>
                            <ControlTemplate TargetType="{x:Type Button}">
                                <ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}"/>
                            </ControlTemplate>
                        </Button.Template>
                        <Border Background="Transparent" Cursor="Hand" Padding="3,0,0,0">
                            <Grid Cursor="Hand" Height="13" Width="12">
                                <Path Data="M5,9L6,9 6,10 5,10z M4,4L5,4 5,5 5,6 5,7 5,8 5,9 4,9 4,8 4,7 4,6 4,5z M7.9850001,3L8.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,4z M3,3L4,3 4,4 3,4z M9,2L10,2 10,3 9,3z M2,2L3,2 3,3 2,3z M7.9999999,0L9,0 10,0 11,0 12,0 12,1 11,1 11,2 10,2 10,1 9,1 7.9999999,1z M0,0L1,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,1z" Fill="Black" Margin="0,1,0,0" Stretch="Fill"/>
                                <Path Data="M0,0L1,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,1z" Fill="White" Height="1" Margin="2,1,2,0" Stretch="Fill" VerticalAlignment="Top"/>
                                <Path Data="M0,0L1,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,1z" Margin="3,2,3,3" Stretch="Fill">
                                    <Path.Fill>
                                        <LinearGradientBrush EndPoint="0.945,0.101" StartPoint="0.055,0.899">
                                            <GradientStop Color="#FFB1DFFD" Offset="0.417"/>
                                            <GradientStop Color="#FFE7F7FE" Offset="0.962"/>
                                        </LinearGradientBrush>
                                    </Path.Fill>
                                </Path>
                                <Path Data="M0,0L1,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,1z" Margin="3,2,3,3" Stretch="Fill" Visibility="{TemplateBinding FunnelFillVisibility}">
                                    <Path.Fill>
                                        <LinearGradientBrush EndPoint="0.703,0.697" StartPoint="0.26,0.134">
                                            <GradientStop Color="#FFDF3131" Offset="0"/>
                                            <GradientStop Color="#FFDF3131" Offset="1"/>
                                            <GradientStop Color="#FFEC7171" Offset="0.502"/>
                                        </LinearGradientBrush>
                                    </Path.Fill>
                                </Path>
                                <Path Data="M5,9L6,9 6,10 5,10z M4,4L5,4 5,5 5,6 5,7 5,8 5,9 4,9 4,8 4,7 4,6 4,5z M7.9850001,3L8.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,4z M3,3L4,3 4,4 3,4z M9,2L10,2 10,3 9,3z M2,2L3,2 3,3 2,3z M7.9999999,0L9,0 10,0 11,0 12,0 12,1 11,1 11,2 10,2 10,1 9,1 7.9999999,1z M0,0L1,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,1z" Margin="0,0,0,1" Stretch="Fill">
                                    <Path.Fill>
                                        <LinearGradientBrush EndPoint="0.703,0.697" StartPoint="0.26,0.134">
                                            <GradientStop Color="#FF10579F" Offset="0"/>
                                            <GradientStop Color="#FF2D6FAB" Offset="1"/>
                                            <GradientStop Color="#FF70A9C6" Offset="0.502"/>
                                        </LinearGradientBrush>
                                    </Path.Fill>
                                </Path>
                            </Grid>
                        </Border>
                    </Button>
                    <Popup x:Name="PART_DropDownPopup" AllowsTransparency="True" PopupAnimation="Slide" StaysOpen="True"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Of course, you're free to modify this to your liking.

Regards,
Dilyan Traykov
Telerik by Progress

[stegua]

Unfortunately, this work only for Popup filter mode, and it does not work in "FilterRow" mode.

As Dominic, we also have a lot of cases  where users did not recognize that they filtered the grid and claim missing/lost data.

Is it possible just to change the active color to red in "FilterRow" mode?

 

thanks.

[Dilyan Traykov]

Hello,

In order to modify the appearance of the filtering funnel when RadGridView's FilteringMode is set to FilterRow, you need to modify the control template of the FieldFilterControl element. Here's the extracted style for the Windows 7 theme:

<Style TargetType="{x:Type telerik:FieldFilterControl}" BasedOn="{StaticResource FieldFilterControlStyle}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type telerik:FieldFilterControl}">
                <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
                    <Grid x:Name="PART_MainGrid">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="Auto"/>
                        </Grid.ColumnDefinitions>
                        <ContentControl x:Name="PART_FilterEditorContentControl"
            Grid.Column="0"
            IsEnabled="{Binding EditorIsEnabled}"
            HorizontalContentAlignment="Stretch"
            VerticalContentAlignment="Stretch"
            Margin="2 1 0 2"/>
                        <telerik:RadDropDownButton x:Name="PART_DropDownButton" Grid.Column="1" KeepOpen="False" Style="{StaticResource FieldFilterDropDownButtonStyle}" DropDownIndicatorVisibility="Collapsed">
                            <Border Cursor="Hand" Background="Transparent" Padding="3 0 0 0">
                                <Grid Cursor="Hand" Height="13" Width="12">
                                    <Path Data="M5,9L6,9 6,10 5,10z M4,4L5,4 5,5 5,6 5,7 5,8 5,9 4,9 4,8 4,7 4,6 4,5z M7.9850001,3L8.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,4z M3,3L4,3 4,4 3,4z M9,2L10,2 10,3 9,3z M2,2L3,2 3,3 2,3z M7.9999999,0L9,0 10,0 11,0 12,0 12,1 11,1 11,2 10,2 10,1 9,1 7.9999999,1z M0,0L1,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,1z" Fill="Black" Margin="0,1,0,0" Stretch="Fill"/>
                                    <Path Data="M0,0L1,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,1z" Fill="White" Height="1" Margin="2,1,2,0" Stretch="Fill" VerticalAlignment="Top"/>
                                    <Path Data="M0,0L1,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,1z" Margin="3,2,3,3" Stretch="Fill">
                                        <Path.Fill>
                                            <LinearGradientBrush EndPoint="0.945,0.101" StartPoint="0.055,0.899">
                                                <GradientStop Color="#FFB1DFFD" Offset="0.417"/>
                                                <GradientStop Color="#FFE7F7FE" Offset="0.962"/>
                                            </LinearGradientBrush>
                                        </Path.Fill>
                                    </Path>
                                    <Path Data="M0,0L1,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,1z" Margin="3,2,3,3" Stretch="Fill" Visibility="{Binding FunnelFillVisibility}">
                                        <Path.Fill>
                                            <LinearGradientBrush EndPoint="0.703,0.697" StartPoint="0.26,0.134">
                                                <GradientStop Color="#FFDF3131" Offset="0"/>
                                                <GradientStop Color="#FFDF3131" Offset="1"/>
                                                <GradientStop Color="#FFEC7171" Offset="0.502"/>
                                            </LinearGradientBrush>
                                        </Path.Fill>
                                    </Path>
                                    <Path Data="M5,9L6,9 6,10 5,10z M4,4L5,4 5,5 5,6 5,7 5,8 5,9 4,9 4,8 4,7 4,6 4,5z M7.9850001,3L8.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,4z M3,3L4,3 4,4 3,4z M9,2L10,2 10,3 9,3z M2,2L3,2 3,3 2,3z M7.9999999,0L9,0 10,0 11,0 12,0 12,1 11,1 11,2 10,2 10,1 9,1 7.9999999,1z M0,0L1,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,1z" Margin="0,0,0,1" Stretch="Fill">
                                        <Path.Fill>
                                            <LinearGradientBrush EndPoint="0.703,0.697" StartPoint="0.26,0.134">
                                                <GradientStop Color="#FF10579F" Offset="0"/>
                                                <GradientStop Color="#FF2D6FAB" Offset="1"/>
                                                <GradientStop Color="#FF70A9C6" Offset="0.502"/>
                                            </LinearGradientBrush>
                                        </Path.Fill>
                                    </Path>
                                </Grid>
                            </Border>
                            <telerik:RadDropDownButton.DropDownContent>
                                <ListBox x:Name="PART_FilterOperatorsListBox" ItemsSource="{Binding AvailableOperatorViewModels}" SelectedItem="{Binding SelectedOperatorViewModel, Mode=TwoWay}"/>
                            </telerik:RadDropDownButton.DropDownContent>
                        </telerik:RadDropDownButton>
                    </Grid>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Regards,
Dilyan Traykov
Telerik by Progress

[Dominic]

Hello stegua,

we solved it, by changing the color of the filtericon in the Telerik theme to red.

1. Take the Teletik Theme project sources.

2. Open "Telerik.Windows.Controls.GridView.xaml"

3. Navigate to line 104.

4. Changed the Color of the GridView_FilterIconBackground_Filtered brush to red:

<LinearGradientBrush x:Key="GridView_FilterIconBackground_Filtered" EndPoint="0.703,0.697 StartPoint="0.26,0.134"><br>
 <GradientStop Color="#FFFF0000" Offset="0" /><br>
 <GradientStop Color="#FFFF0000" Offset="1" /><br>
 <GradientStop Color="#FFFF0000" Offset="0.502" /><br>
</LinearGradientBrush>

 

5. Compile the Theme project and take the compiled assembly to you Telerik reference folder.

Regards,

Dominic