Filter button

[Cristi Catalan]

Hello,

How can I get hold of a reference to the Filter popup and the Filter button? The reason I need this is that I want to respond to the click event of the button by closing the Filter popup.

I do not want to use the Filtered event on the RadGridView as that one is raised even when clicking on the check boxes.

I suppose using FindName on the Template would get the job done, but what is the template name for Filter popup?

Thank you.

[Pavel Pavlov]

Hello Cristi Catalan,

I believe you may not need to get reference to the filtering control.
you may disable filtering for the whole RadGridview using the RadGridView.IsFilteringAllowed property or if you want  you may disable it just for a specific column by setting the IsFilterable property of the column to false.


Sincerely yours,
Pavel Pavlov
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Cristi Catalan]

I don't want to disable filtering, just to add code for the click event of the Filter button. (In my case that code would close the popup, but filtering should still occur).

Just to show my point I will give an example (totally unrelated to my needs), but using RadComboBox.
 

<Window x:Class="WpfApplication4.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:t="http://schemas.telerik.com/2008/xaml/presentation"
    Title="Window1" Height="300" Width="300">

    <StackPanel>
        <t:RadComboBox Name="comboBox">
            <t:RadComboBoxItem>1</t:RadComboBoxItem>
            <t:RadComboBoxItem>2</t:RadComboBoxItem>
            <t:RadComboBoxItem>3</t:RadComboBoxItem>
        </t:RadComboBox>
    </StackPanel>
</Window>

using System;
using System.Windows;
using System.Windows.Controls.Primitives;

namespace WpfApplication4
{
    public partial class Window1 : Window
    {
        public Window1()
        {
            InitializeComponent();

            comboBox.ApplyTemplate();
            Popup popup = (Popup)comboBox.Template.FindName("PART_Popup", comboBox);
            popup.RequestBringIntoView += new RequestBringIntoViewEventHandler(popup_RequestBringIntoView);
        }

        void popup_RequestBringIntoView(object sender, RequestBringIntoViewEventArgs e)
        {
            Console.WriteLine("event happened");
        }
    }
}

Now, what I want is something similar to this but for the Filter popup on the RadGridView.

Thanks.

[Rossen Hristov]

Hello Cristi Catalan,

First let me explain why the behavior is such by default. The filtering popup can be closed only when the user clicks outside and that is by design. We have decided to make it this way because we have no way of knowing when filtering is done and what is the definition of "filtering is done". So the user will have to click on the filtering funnel or outside to close this pop-up and this is the default behavior.

The good news is that there is a way to override this behavior very easily. We will do it by creating an attached behavior for the column. Here is how to turn it on in XAML:

<Window x:Class="ClosePopupOnApplyFilter.Window1"
    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:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
    xmlns:my="clr-namespace:ClosePopupOnApplyFilter"
    Title="Window1" Height="700" Width="600">
    <Grid>
        <telerik:RadGridView Name="clubsGrid"
                             AutoGenerateColumns="False"
                             ColumnsWidthMode="Auto">
            <telerik:RadGridView.Columns>
                <telerik:GridViewDataColumn Header="Name"
                                            DataMemberBinding="{Binding Name}">
                    <i:Interaction.Behaviors>
                        <my:ClosePopupOnApplyFilterBehavior />
                    </i:Interaction.Behaviors>
                </telerik:GridViewDataColumn>

                <telerik:GridViewDataColumn Header="Est."
                                            DataMemberBinding="{Binding Established}"
                                            DataFormatString="{}{0:yyyy}"/>
                <telerik:GridViewDataColumn Header="Stadium"
                                            DataMemberBinding="{Binding StadiumCapacity}"
                                            DataFormatString="{}{0:N0}"/>
            </telerik:RadGridView.Columns>
        </telerik:RadGridView>
    </Grid>
</Window>

And here is the actual behavior. It is not very complex:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using Telerik.Windows.Controls;
using System.Windows;
using Telerik.Windows.Controls.GridView;
using System.Windows.Controls;
using System.Windows.Interactivity;

namespace ClosePopupOnApplyFilter
{
    /// <summary>
    /// A behavior that closes the filtering popup of a column when the Apply Filter
    /// button is clicked.
    /// </summary>
    public class ClosePopupOnApplyFilterBehavior : Behavior<GridViewBoundColumnBase>
    {
        FilteringControl customFilteringControl;
        Button applyFilterButton;

        /// <summary>
        /// Called after the behavior is attached to an AssociatedObject.
        /// </summary>
        /// <remarks>Override this to hook up functionality to the AssociatedObject.</remarks>
        protected override void OnAttached()
        {
            // This is the control that RadGridView uses internally if you
            // don't specify a custom filtering control through the
            // GridViewBoundColumnBase.FilteringControl property.
            // We will create an instance of this default filtering control
            // and use it as a "custom" filtering control in order to extend
            // just a little bit with our custom logic. Everything else will
            // be the same.
            this.customFilteringControl = new FilteringControl();
            this.customFilteringControl.Loaded += this.OnFilteringControlLoaded;

            // Tell the column to use our new "custom" filtering control.
            // It will never now that this is the default one but spicied up a little.
            this.AssociatedObject.FilteringControl = customFilteringControl;
        }

        void OnFilteringControlLoaded(object sender, RoutedEventArgs e)
        {
            // When it loads and all of its children are alive find the "Filter"
            // button which is the only button on the control.
            // You can find out what its name is from the FilteringControl template.
            this.applyFilterButton = this.customFilteringControl
                .ChildrenOfType<Button>()
                .Where(b => b.Name == "PART_ApplyFilterButton")
                .FirstOrDefault();

            if (this.applyFilterButton != null)
            {
                this.applyFilterButton.Click += this.OnApplyFilter;
            }
        }

        void OnApplyFilter(object sender, RoutedEventArgs e)
        {
            // And when clicked find the parent popup and close it.
            var popup = applyFilterButton.ParentOfType<System.Windows.Controls.Primitives.Popup>();
            if (popup != null)
            {
                popup.IsOpen = false;
            }
        }

        /// <summary>
        /// Called when the behavior is being detached from its AssociatedObject,
        /// but before it has actually occurred.
        /// </summary>
        /// <remarks>Override this to unhook functionality from the AssociatedObject.</remarks>
        protected override void OnDetaching()
        {
            if (this.applyFilterButton != null)
            {
                this.applyFilterButton.Click -= this.OnApplyFilter;
            }

            this.customFilteringControl.Loaded -= this.OnFilteringControlLoaded;
        }
    }
}

I have attached a sample project with all of these. You can turn on the behavior in many different ways and places. Please, read my comments in the Window1.xaml.cs.

I hope that this behavior will help. Let me know if there are any problems.

Regards,
Ross
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Cristi Catalan]

Brilliant solution. Cheers.

[Brendon]

We had come up with a solution, very similar to this approach, to auto-close the filter when-ever the user pressed enter in one of the two TextBoxes. We used linq to get the TextBoxes that have the Name of PART_Filter1TextBox or PART_Filter2TextBox. The Name appears to be blank now in the 2010 Q3 Release. 
Any ideas?

[Rossen Hristov]

Hello Brendon,

We have introduced type-aware filter editors. This means that the hard-coded TextBox is gone. Now different editors are placed in the spot depending on the data type, i.e. you will get a date picker if your column is DateTime one and so on.

The change in XAML is the following: The textbox was replaced by a ContentControl which will host a different editor base on the data type:

<StackPanel Margin="0,2" Visibility="{TemplateBinding FieldFiltersVisibility}">
    <TextBlock telerik:LocalizationManager.ResourceKey="GridViewFilterShowRowsWithValueThat" Margin="0,2,0,0" />
    <input:RadComboBox x:Name="PART_Filter1ComboBox"
                       Margin="0,2,0,2"
                       ItemTemplate="{StaticResource ActionTemplate}"
                       telerik:StyleManager.Theme="{StaticResource Theme}"
                       ItemsSource="{Binding AvailableActions}"
                       SelectedItem="{Binding Filter1.Operator, Mode=TwoWay}" />
    <ContentControl x:Name="PART_Filter1ContentControl"
                    DataContext="{Binding Filter1}"
                    Margin="0, 2"
                    HorizontalContentAlignment="Stretch"
                    VerticalContentAlignment="Stretch"/>
    <input:RadComboBox x:Name="PART_LogicalOperatorsComboBox"
                       Margin="0,2"
                       telerik:StyleManager.Theme="{StaticResource Theme}"
                       ItemTemplate="{StaticResource LogicalOperatorTemplate}"
                       ItemsSource="{Binding LogicalOperators}"
                       SelectedItem="{Binding FieldFilterLogicalOperator, Mode=TwoWay}" />
    <input:RadComboBox x:Name="PART_Filter2ComboBox"
                       Margin="0,2"
                       telerik:StyleManager.Theme="{StaticResource Theme}"
                       ItemTemplate="{StaticResource ActionTemplate}"
                       ItemsSource="{Binding AvailableActions}"
                       SelectedItem="{Binding Filter2.Operator, Mode=TwoWay}" />
    <ContentControl x:Name="PART_Filter2ContentControl"
                    DataContext="{Binding Filter2}"
                    Margin="0, 2"
                    HorizontalContentAlignment="Stretch"
                    VerticalContentAlignment="Stretch"/>
    <!--<TextBox x:Name="PART_Filter2TextBox"
             Text="{Binding Filter2.Value, Mode=TwoWay}"
             VerticalContentAlignment="Center"
             Margin="0,2" Padding="3,0"
             telerik:StyleManager.Theme="{StaticResource Theme}"
             Height="22" />
    <CheckBox x:Name="PART_Filter2MatchCaseCheckBox"
              IsChecked="{Binding Filter2.IsCaseSensitive, Mode=TwoWay}"
              Visibility="{Binding MatchCaseVisibility}"
              Margin="0,2"
              telerik:LocalizationManager.ResourceKey="GridViewFilterMatchCase"
              telerik:StyleManager.Theme="{StaticResource Theme}"/>-->
</StackPanel>

There is an event called FieldFilterEditorCreated. In the event handler of this event you have access to the actual editor that was created. You can configure it there -- for example set the mode of a date time picker to be time only. Or even better, you can entirely replace it with your very own editor.

I hope this helps.

Regards,
Ross
the Telerik team

[Mike]

Hi,

Great post ;)
How can I set this behavior for all filtering controls in the application?

Thanks.

[Rossen Hristov]

Hello,

By attaching this behavior to every column that you want to have this behavior. If you have many columns, you can do this in code-behind, but this really goes beyond the scope of Telerik support since this is general WPF knowledge and does not involve anything Telerik-specific.

Greetings,
Ross
the Telerik team

[Mike]

ok thanks for reply,
I knew that this is one of existing solutions, but I looked for a more clever one :(

[gans]

This solution doesn't work with latest Telerik release 2012.1 

This part of the code is complaining that the empty constructor is not available anymore. 

this.customFilteringControl = new FilteringControl(); 

[Rossen Hristov]

Hi,

You have to use 2012 Q1 SP1. You have to inherit from the FilteringControl class since its default constructor is protected -- it is not public. Or even better -- construct the FilteringControl by passing in the column instance to the public constructor. Otherwise unexpected results might occur which we can't be responsible for.

All the best,
Ross
the Telerik team

[gans]

Yes, I am using  2012 Q1 SP1. I was just trying to run the solution you had attached in the previous post dated  Jan 22, 2010.

You had attached this solution in your post. Is this supposed to work as is with 2012 Q1 SP1 or I need to make changes for this to work?

closepopuponapplyfilter.zip 

[Rossen Hristov]

Hello,

I have updated the project. Please, examine the source code.

Regards,
Ross
the Telerik team

[gans]

Yes, it works now. Thanks for the quick response. 

Using this behavior approach, I should be able to suppress the default Filter action and run my custom Filter logic right?

[Rossen Hristov]

Hello,

I am afraid that this will not be possible if you use our stock FilteringControl. If you have your own custom filtering control -- you can do whatever you like. If you examine the source code of the stock FilteringControl as I mentioned earlier, you can build your own custom filtering control. This is not a trivial task I am afraid and I am afraid that this really goes beyond our scope of support.

Kind regards,
Ross
the Telerik team

[Rossen Hristov]

Hello,

A good idea would be to cover the entire filtering documentation before you go on. You need to understand how filtering works, if you want to be able to build your very own custom filtering control.

Kind regards,
Ross
the Telerik team

[Gabriele]

Hi, I know that this post il a little bit old, but I'm trying to achieve the same purpose, closing the popup filter on ApplyFilter button Click.
I copied the code from your example, by using Interaction Behaviors, and it works perfectly at runtime.

The problem is while I'm trying to manage the xaml file, I get this exception :

System.ArgumentException in "C:\.......\MainWindow.xaml": GenericArguments[0], 'System.Object', on 'System.Windows.Interactivity.Behavior`1[T]' violates the constraint of type parameter 'T'.

This exception cause me the impossibility to use the intellisense in xaml, even if the application runs normally.

Can anyone help me someway?

Thank you..

[Yoan]

Hi Gabriele,

I am not sure what exactly happens in your case. I've tried to reproduce the problem you report but to no avail. May I ask you what exactly version of RadControls for WPF you are using?

It would be of great help if you could isolate the problem in a simple project so we can reproduce it on our side. You can take a look at this blog post for a reference on how to isolate an issue in a sample project.

Looking forward to hearing from you!

Regards,
Yoan
Telerik

[Gabriele]

Hi,the version of my RadControls is 2013.1.520.40.
Now I'm gonna try to isolate the problem and maybe send my project to you.

Thank you.
Gabriele

[Gabriele]

Dear Yoan, I reproduced my issue in a simple project similar to yours.
In my MainWindow.xaml i still get this exception:

System.ArgumentException in "C:\.......\MainWindow.xaml": GenericArguments[0], 'System.Object', on 'System.Windows.Interactivity.Behavior`1[T]' violates the constraint of type parameter 'T'.

The application runs normally, but is very noisy not being able to edit the xaml propertly..

The strange thing is that if I compile your project I don't have this exception, but I noticed that in your example the RadControls version is 2012.1.326.40. I think that this is the point, don't you think?
I hope you would help me.

Thanks a lot.

[Yoan]

Hello Gabriele,

Actually the mentioned project is quite old. Please test with the latest official release  - Q2 2013 and let me know about the result.

Regards,
Yoan
Telerik

[Gabriele]

I tried everything, i downloaded the new Q2 2013 controls, i re-installed Microsoft Expression Blend Software Development Kit (SDK) for .NET 4, for the System.windows.interactivity.dll, but nothing has changed..

I still get the same error.

[Yoan]

Hi Gabriele,

I have already answered your ticket containing the same question. However, I will post my answer here as well in case anyone experience the same behavior:

I was able to reproduce the exception. However, it is really strange and unexpected. Based on the
exception - you are passing a non supported type in the creation of a behavior. Please, take into account that you must assign a type that derives from DependencyObject (GridViewColumnBase passes this requirement). I have tested your sample project with VS 2012 and there is no problem. Moreover, I have tested the same application but in C# and everything works as expected.

Since, the mentioned forum post is quite old, I can suggest you another approach. Instead of using behaviours, you can simply override the OnApplyFilter method of our FilteringControl. Please check the attached project for a reference.

Regards,
Yoan
Telerik

[Gabriele]

This works perfectly! :)

Thanks!

[Dimitrina]

Hello,

We found a problem in the previously attached solution. You can find the updated version. 

Regards,
Didie
Telerik

[Hadrien]

In the last example posted, if we click on "Filter" button (filter popup) that popup will disappear. How can we get the same behavior when we press the ENTER key?
Other question, how to put the focus on search box when we click at the filter option in one column? It would be faster if we click on the column filter and then type wherever we want to search and then type ENTER and the popup disappear.

Thanks

[Yoan]

Hi Hadrien,

Please find attached a sample project that meets your requirements.

Regards,
Yoan
Telerik

[Hadrien]

Hi Yoan,

Thanks for the provided solution.

[Mike]

Yoan, Thanks for the sample project.  I have a very similar problem as Hadrien, and I found you project helpful.  However, I noticed that it works the first time you open the filter popup, and then does not work when closing it and re-opening it.  Do you know why?

[Yoan]

Hi Mike,

Indeed, you are right. What you can try is to use a Dispatcher with DispatcherPriority.Loaded:

void MyFilteringControl_Loaded(object sender, System.Windows.RoutedEventArgs e)
        {
            Dispatcher.BeginInvoke(DispatcherPriority.Loaded, new Action(() =>
                      {
                          var tb = this.ChildrenOfType<TextBox>().FirstOrDefault();
                          if (tb != null)
                          {
                              tb.Focus();
                              tb.KeyDown += new System.Windows.Input.KeyEventHandler(tb_KeyDown);
                          }
                      }));
        }

Regards,
Yoan
Telerik

 

 

[Prabha]

Hi,
I am using the below static line in Xaml, 

<telerik:RadComboBox x:Name="PART_Filter1ComboBox" ItemsSource="{Binding AvailableActions}" SelectedItem="{Binding Filter1.Operator, Mode=TwoWay}"  Margin="0,2"><telerik:RadComboBox.ItemTemplate><DataTemplate><TextBlock>
 <TextBlock.Text><Binding><Binding.Converter><grid:FilterOperatorConverter/></Binding.Converter></Binding></TextBlock.Text>
 </TextBlock></DataTemplate></telerik:RadComboBox.ItemTemplate><telerik:StyleManager.Theme><telerik:Office2016Theme/>
 </telerik:StyleManager.Theme></telerik:RadComboBox>
During filtering, I am getting only Is Equal To, Is Not Equal To, Is Null and Is Not Null as Option. I want the complete list. Is there anything i have to configure to get the whole value?

[Dinko | Tech Support Engineer]

Hi Prabha,

Thank you for the provided code snippet.

The missing option could come from the property type which the column is bound for. May I ask you to share the type of this property. Also, it is possible to update one of the projects in this thread to mimic your implementation and send it back to me. This way I can have a better look.

Regards,
Dinko
Progress Telerik