FilterRow below ColumnHeader

[Hubert]

Hello,

How can I achieve a FilterRow that looks like the one I've attached?

Greetings

[Rossen Hristov]

Hi,

We offer a built-in Filter Row feature. You can turn it on by setting FilteringMode="FilterRow".

Kind regards,
Rossen Hristov
the Telerik team

[Hubert]

Hi,

I know this Feature but i don´t want to have the CaseSensitive and the Filter Button!
Is it possible to customize the FilterRow ?

[Rossen Hristov]

Hello,

To hide the match case visibility button you can attach to the FieldFilterEditorCreated event of the grid, check whether the editor is a StringFilterEditor and then set its MatchCaseVisibility to Collapsed.

To hide the filtering funnel, you can use Expression Blend (or do it by hand) and edit the XAML control template of FieldFilterControl. Then you can hide the button called PART_DropDownButton.

Regards,
Rossen Hristov
the Telerik team

[Hubert]

Hi,

thanks for your quick response!
Do you have a Sample for that?

[Rossen Hristov]

Hello,

http://www.telerik.com/help/wpf/common-styling-appearance-edit-control-templates-blend.html

Regards,
Rossen Hristov
the Telerik team

[Hubert]

Thanks, one more question how can i set the Filter programmatically e.g. starts with?

[Rossen Hristov]

Hello,

You can check our online docs. They explain how to do this.

Regards,
Rossen Hristov
the Telerik team

[MohanRajP - PmR]

Hi Rossen,
I need to change the field filter control of Dropdown button color. I tried but not able to get the proper template.
can you please share?

Regards,
MohanRajP

[Rossen Hristov]

Hi,

The control is called FieldFilterControl. Here is its template:

<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:grid="clr-namespace:Telerik.Windows.Controls.GridView"
                    xmlns:treelist="clr-namespace:Telerik.Windows.Controls.TreeListView"
                    xmlns:input="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Input"
                    xmlns:controls="clr-namespace:Telerik.Windows.Controls"



    >

    <grid:FilterOperatorConverter x:Key="FilterOperatorConverter" />
<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" />
<telerik:Office_BlackTheme x:Key="Theme" />
<SolidColorBrush x:Key="ControlOuterBorder" Color="#FF848484" />



    <DataTemplate x:Key="FilterOperatorItemTemplate">
        <TextBlock Text="{Binding Converter={StaticResource FilterOperatorConverter}}" />
    </DataTemplate>

    <Style x:Key="FieldFilterDropDownButtonStyle" TargetType="telerik:RadDropDownButton">
        <Setter Property="IsOpen" Value="false"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="HorizontalContentAlignment" Value="Center"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="Padding" Value="3"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="telerik:RadDropDownButton">
                    <Grid>
                        <ContentPresenter x:Name="Content" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}"  HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}"  VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        <Popup x:Name="DropDownPopup">
                            <ContentPresenter x:Name="DropDownPopupContent" ContentTemplate="{TemplateBinding DropDownContentTemplate}" Content="{TemplateBinding DropDownContent}" DataContext="{Binding DataContext, RelativeSource={RelativeSource TemplatedParent}}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
                        </Popup>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <ControlTemplate x:Key="FieldFilterControlTemplate" TargetType="grid: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 Width="12" Height="13" Cursor="Hand">
                            <Path Fill="{StaticResource GridView_FilterIconOuterBorder}" Stretch="Fill" Margin="0 1 0 0" 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"/>
                            <Path Fill="{StaticResource GridView_FilterIconTopBorder}" Stretch="Fill" Margin="2 1 2 0" VerticalAlignment="Top" Height="1" 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"/>
                            <Path Fill="{StaticResource GridView_FilterIconBackground}" Stretch="Fill" Margin="3 2 3 3" 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" />
                            <Path Fill="{StaticResource GridView_FilterIconBackground_Filtered}" Visibility="{Binding FunnelFillVisibility}" Stretch="Fill" Margin="3,2,3,3" 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" />
                            <Path Fill="{StaticResource GridView_FilterIconInnerBorder}" Stretch="Fill" Margin="0 0 0 1" 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"/>
                        </Grid>
                    </Border>

                    <telerik:RadDropDownButton.DropDownContent>
                        <ListBox x:Name="PART_FilterOperatorsListBox"
                                 ItemsSource="{Binding AvailableOperatorViewModels}"
                                 SelectedItem="{Binding SelectedOperatorViewModel, Mode=TwoWay}"
                                 telerik:StyleManager.Theme="{StaticResource Theme}"/>
                    </telerik:RadDropDownButton.DropDownContent>
                </telerik:RadDropDownButton>

            </Grid>

        </Border>
    </ControlTemplate>

    <Style x:Key="FieldFilterControlStyle" TargetType="grid:FieldFilterControl">
        <Setter Property="Template" Value="{StaticResource FieldFilterControlTemplate}" />
        <Setter Property="BorderThickness" Value="0 0 1 0"/>
        <Setter Property="MinHeight" Value="26"/>
        <Setter Property="BorderBrush" Value="{StaticResource ControlOuterBorder}"/>

        <Setter Property="SnapsToDevicePixels" Value="True" />

    </Style>

    <Style TargetType="grid:FieldFilterControl"
           BasedOn="{StaticResource FieldFilterControlStyle}"/>


    <Style TargetType="grid:FieldFilterControl"
           BasedOn="{StaticResource FieldFilterControlStyle}"
           x:Key="{telerik:ThemeResourceKey ThemeType={x:Type telerik:Office_BlackTheme}, ElementType={x:Type grid:FieldFilterControl}}"/>




</ResourceDictionary>

You can examine the template and change what you need to change.

All the best,
Rossen Hristov
the Telerik team

[Jason]

Hi I've been trying for the life of me to get this to work, but seem completely unable to do it and was looking for some help.

I'm in the same boat where I want to hide the filter button from the filter row, however, when I try to past that into my <Window.Resources> tag I get the following errors:

The name "FieldFilterControl" does not exist in the namespace "clr-namespace:Telerik.Windows.Controls.GridView".

But I'm not sure what I'm doing wrong since the documentation says it should exist there?

[Jason]

For the record I've looked through all the links provided, but none of them really explain how to do what I'm trying to do. The posts keep saying to edit the FieldFilterControl in blend, but I don't see how you do that when if I open my application with Blend it shows my datagrid template that I can edit, but nothing about FieldFilterControl. I even tried overwriting the default .xaml file  in the Telerik installation folder to comment out the PART_Dropdownbutton section but it seemed to have no effect. 

[Jason]

Whoops, I guess I should have just flailed for a while longer. I eventually did get this to work after copying and pasting from the xaml file.

For anyone else who comes across this and wants to hide everything for your filter row, this is what I ended up doing:

 

In your xaml file, within <Window></Window> add:

<Window.Resources>
       <Style x:Key="FieldFilterDropDownButtonStyle" TargetType="telerik:RadDropDownButton">
           <Setter Property="IsOpen" Value="false"/>
           <Setter Property="BorderThickness" Value="1"/>
           <Setter Property="HorizontalContentAlignment" Value="Center"/>
           <Setter Property="VerticalContentAlignment" Value="Center"/>
           <Setter Property="Template">
               <Setter.Value>
                   <ControlTemplate TargetType="telerik:RadDropDownButton">
                       <Grid>
                           <ContentPresenter x:Name="Content"
                               ContentTemplate="{TemplateBinding ContentTemplate}"
                               Content="{TemplateBinding Content}"
                               Margin="{TemplateBinding Padding}"
                               HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                               VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                           <Popup x:Name="DropDownPopup" mat:ThemeEffectsHelper.IsAcrylic="True">
                               <Border x:Name="DropDownPopupBorder" Background="{telerik1:FluentResource ResourceKey=AlternativeBrush}">
                                   <ContentPresenter x:Name="DropDownPopupContent"
                                       ContentTemplate="{TemplateBinding DropDownContentTemplate}"
                                       Content="{TemplateBinding DropDownContent}"
                                       DataContext="{TemplateBinding DataContext}"
                                       HorizontalAlignment="Stretch"
                                       VerticalAlignment="Stretch"/>
                               </Border>
                           </Popup>
                       </Grid>
                       <ControlTemplate.Triggers>
                           <Trigger SourceName="DropDownPopup" Property="mat:ThemeEffectsHelper.IsAcrylic" Value="True">
                               <Setter TargetName="DropDownPopupBorder" Property="Background" Value="{Binding Source={StaticResource AlternativeBrushProxy}, Path=ProxyValue, Converter={StaticResource OpacityConverter}, ConverterParameter=128}"/>
                           </Trigger>
                       </ControlTemplate.Triggers>
                   </ControlTemplate>
               </Setter.Value>
           </Setter>
       </Style>
       <ControlTemplate x:Key="FieldFilterControlTemplate" TargetType="grid:FieldFilterControl">
           <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}">
               <Grid x:Name="PART_MainGrid">
                   <Grid.ColumnDefinitions>
                       <ColumnDefinition Width="*"/>
                       <!--<ColumnDefinition Width="Auto"/>-->
                   </Grid.ColumnDefinitions>
                   <ContentControl x:Name="PART_FilterEditorContentControl" Margin="3 0" IsEnabled="{Binding EditorIsEnabled}" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch"/>
                   <!--<telerik:RadDropDownButton x:Name="PART_DropDownButton" Grid.Column="1" Style="{StaticResource FieldFilterDropDownButtonStyle}" KeepOpen="False" DropDownIndicatorVisibility="Collapsed">
                       <Border Cursor="Hand" Background="Transparent" Padding="2 0 5 0">
                           <Grid Width="12" Height="11" Margin="2">
                               <telerik:RadGlyph FontSize="16" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="{TemplateBinding Foreground}" Glyph="{StaticResource GlyphFilterSmall}"/>
                               <telerik:RadGlyph
                                   FontSize="16"
                                   HorizontalAlignment="Center"
                                   VerticalAlignment="Center"
                                   Foreground="{telerik1:FluentResource ResourceKey=AccentFocusedBrush}"
                                   Visibility="{Binding FunnelFillVisibility}"
                                   Glyph="{StaticResource GlyphFilterSmall}"/>
                           </Grid>
                       </Border>
                       <telerik:RadDropDownButton.DropDownContent>
                           <ListBox x:Name="PART_FilterOperatorsListBox"
                               Background="#01FFFFFF"
                               ItemsSource="{Binding AvailableOperatorViewModels}"
                               SelectedItem="{Binding SelectedOperatorViewModel, Mode=TwoWay}"/>
                       </telerik:RadDropDownButton.DropDownContent>
                   </telerik:RadDropDownButton> -->
               </Grid>
           </Border>
       </ControlTemplate>
       <Style x:Key="FieldFilterControlStyle" TargetType="grid:FieldFilterControl">
           <Setter Property="Template" Value="{StaticResource FieldFilterControlTemplate}"/>
           <Setter Property="BorderBrush" Value="{telerik1:FluentResource ResourceKey=BasicSolidBrush}"/>
           <Setter Property="BorderThickness" Value="0 0 1 1"/>
           <Setter Property="Padding" Value="0 1"/>
           <Setter Property="MinHeight" Value="31"/>
           <Setter Property="FontWeight" Value="Normal"/>
           <Setter Property="telerik:TouchManager.TouchMode" Value="None"/>
       </Style>
       <Style TargetType="grid:FieldFilterControl" BasedOn="{StaticResource FieldFilterControlStyle}"/>


   </Window.Resources>

 

And at the top of the xaml I also had to include the following references:

xmlns:telerik1="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls"
xmlns:grid="clr-namespace:Telerik.Windows.Controls.GridView;assembly=Telerik.Windows.Controls.GridView"
xmlns:mat="clr-namespace:Telerik.Windows.Controls.MaterialControls;assembly=Telerik.Windows.Controls"

 

That will get rid of your filter button. To get rid of the Match Case button, add Search As You Type Filtering, and adjust your textbox so that it doesn't get cutoff and is hidden until selected (looks cleaner), add the following methods to the code behind:

private void gridView_FieldFilterEditorCreated2(object sender, Telerik.Windows.Controls.GridView.EditorCreatedEventArgs e)

        {

            //get the StringFilterEditor in your RadGridView

            var stringFilterEditor = e.Editor as Telerik.Windows.Controls.Filtering.Editors.StringFilterEditor;

 

            if (stringFilterEditor != null) // this is suggested as an option but doesn't


            {

                stringFilterEditor.MatchCaseVisibility = Visibility.Collapsed;

            }

 

            if (stringFilterEditor != null)

            {

                stringFilterEditor.Loaded += (s1, e1) =>

                {

                    var textBox = e.Editor.ChildrenOfType<TextBox>().Single();

                    textBox.BorderBrush = Brushes.Transparent;

                    textBox.MinWidth = 0; //otherwise it gets cutoff in narrow columns.


                     

                    textBox.TextChanged += (s2, e2) =>

                    {                     

                        textBox.GetBindingExpression(TextBox.TextProperty).UpdateSource();

                        textBox.Focus();

                    };

                };

            }

        }

        private void OnRadGridViewFilterOperatorsLoading(object sender, Telerik.Windows.Controls.GridView.FilterOperatorsLoadingEventArgs e)

        {

             //For search as you type to work the default comparators for each column need to be set.

            switch (e.Column.UniqueName)

            {

                case "Col1":

                    e.DefaultOperator1 = Telerik.Windows.Data.FilterOperator.Contains;

                    break;

                case "Col2":

                    e.DefaultOperator1 = Telerik.Windows.Data.FilterOperator.Contains;

                    break;

                case "Col3":

                    e.DefaultOperator1 = Telerik.Windows.Data.FilterOperator.Contains;

                    break;

                case "Col4":

                    e.DefaultOperator1 = Telerik.Windows.Data.FilterOperator.IsGreaterThanOrEqualTo;

                    break;

 

            }

        }

 

Note that you'll have to adjust your column names to set the appropriate default comparators to get SAYT working. And then finally just link up your event handlers in your MainWindow constructor after InitializeComponent():

public MainWindow()
        {
            StyleManager.ApplicationTheme = new FluentTheme();

            InitializeComponent();
            this.localDataGrid.FieldFilterEditorCreated += gridView_FieldFilterEditorCreated2;
            this.localDataGrid.FilterOperatorsLoading += OnRadGridViewFilterOperatorsLoading;

        }

[Sia]

Hello,

I am happy to hear that you have managed to find a solution. However below are some of my comments: 

1. Instead of commenting the lines in the custom style targeting FieldFilterControl, I would set Visibility="Collapsed" to the RadDropDownButton inside because there is x:Name starting with PART, which means that it is called by code and removing it may lead to unexpected behavior. 
2. I would suggest you migrating to NoXAML binaries because this way it won't be needed to copy all StaticResources in your application (which means that if you have already migrated to NoXAML, you can delete the FieldFilterDropDownButtonStyle)
3. Instead of hiding the MatchCase indicator in code, you can use the following style: 

   <Style  TargetType="filteringEditors:StringFilterEditor" BasedOn="{StaticResource StringFilterEditorStyle}">
       <Setter Property="MatchCaseVisibility" Value="Collapsed" />
   </Style>

I hope this helps. 

Regards,
Sia
Progress Telerik