Close Filter Popup on Enter Key

[Todd]

I have a request from end users to have the GridView Filter Popup window closed when the Enter key is hit.  Is this possible?

[Boris]

Hello Todd,

In order to close filtering Popup on pressing the Enter key, you will need to create a custom class that derives from FilteringControl. Then you can use the ChildrenOfType<T>() extension method to find the filtering TextBox and then subscribe to its KeyDown event. In addition to close the Popup, you need to set its IsOpen property to false. To do that you will need to find it first. A possible way to achieve this is to use the ParentOfType<T>() extension method.

Also, if you want to close the popup when the Filter button is pressed you need to override the OnApplyFilter method of the FilteringControl. For example you can do something like the following: 

public class MyFilteringControl : FilteringControl
    {
        public MyFilteringControl(Telerik.Windows.Controls.GridViewColumn column)
            : base(column)
        {
            this.DefaultStyleKey = typeof(MyFilteringControl);
            this.Loaded += new System.Windows.RoutedEventHandler(MyFilteringControl_Loaded);
        }

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

        }

        void tb_KeyDown(object sender, System.Windows.Input.KeyEventArgs e)
        {
            if (e.Key == Key.Enter)
            {
                this.ParentOfType<Popup>().IsOpen = false;
            }
        }

        protected override void OnApplyFilter()
        {
            base.OnApplyFilter();

            var popup = this.ParentOfType<System.Windows.Controls.Primitives.Popup>();
            if (popup != null)
            {
                popup.IsOpen = false;
            }
        }
    }

Then you can apply it to a desired column like so:

public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();

            this.clubsGrid.Columns["Name"].FilteringControl = new MyFilteringControl(this.clubsGrid.Columns["Name"]);
        }
    }

I attached a sample project that demonstrates the suggested approach. The example uses NoXAML binaries. However, if you need the example to work with the standard binaries including theme dlls, you will need to remove the ResourceDictionary in the App.xaml file.

For more information about the different types of binaries you can check the Setting a Theme (Using Implicit Styles) article.

Please let us know if this helps.

Regards,
Boris Penev
Telerik

 

 

[Zohreh]

Hi Boris,

If you do it across the whole application, It can be done with behavior much easier.

just need to add a behavior to FilteringDropDown in your GridViewHeaderCellTemplate.

[Stefan]

Hi Zohreh,

Indeed, your suggestion seems reasonable. Thank you for sharing it with the community.

All the best,
Stefan X1
Telerik

[Todd]

Could you provide an example?  It would be very helpful.  

[Zohreh]

This is an example of the behavior I have created:

  public class EnterKeyClosesPopupBehavior : Behavior<FilteringDropDown>
    {
        protected override void OnAttached()
        {
            AssociatedObject.KeyDown += AssociatedObject_KeyDown;
        }

        protected override void OnDetaching()
        {
            base.OnDetaching();
            AssociatedObject.KeyDown -= AssociatedObject_KeyDown;
        }

        private void AssociatedObject_KeyDown(object sender, KeyEventArgs e)
        {
            if(e.Key == Key.Enter)
            {
                AssociatedObject.IsDropDownOpen = false;
            }
        }
    }

 

and then in GridViewHeaderCellTemplate you need to attach this behavior to the filtering popup, something like this:

  <grid:FilteringDropDown x:Name="PART_DistinctFilterControl" Grid.Column="1" Visibility="{TemplateBinding FilteringUIVisibility}"                                             Margin="0,0,-2,0">
                         <i:Interaction.Behaviors>
                     <EnterKeyClosesPopupBehavior />
                    </i:Interaction.Behaviors>
  </grid:FilteringDropDown>

 

hope you find this helpful.

[Todd]

Hi Zohreh,

I finally got the time to look at this.  I have the code in place and see that the OnAttached and OnDetaching methods are being called, but the KeyDown is never called.  Is this a problem with the keypress events not bubbling up to the filter popup?

Todd