Adjust filter icon for active grid filter.

7 posts, 2 answers
  1. Dominic
    Dominic avatar
    15 posts
    Member since:
    May 2012

    Posted 01 Aug Link to this post

    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?

  2. Dominic
    Dominic avatar
    15 posts
    Member since:
    May 2012

    Posted 01 Aug in reply to Dominic Link to this post

    Is it "GridView_FilterIconBackground_Filtered"?
  3. DevCraft banner
  4. Dominic
    Dominic avatar
    15 posts
    Member since:
    May 2012

    Posted 01 Aug in reply to Dominic Link to this post

    Is it "GridView_FilterIconBackground_Filtered" ? 
  5. Answer
    Dilyan Traykov
    Admin
    Dilyan Traykov avatar
    368 posts

    Posted 01 Aug Link to this post

    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
    Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
  6. stegua
    stegua avatar
    1 posts
    Member since:
    Jan 2015

    Posted 19 Aug in reply to Dilyan Traykov Link to this post

    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.

  7. Answer
    Dilyan Traykov
    Admin
    Dilyan Traykov avatar
    368 posts

    Posted 22 Aug Link to this post

    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
    Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
  8. Dominic
    Dominic avatar
    15 posts
    Member since:
    May 2012

    Posted 1 day and 3 hours ago Link to this post

    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

Back to Top
DevCraft banner