How can I customize the filtering row to allow just a custom control?

[Alex]

How can I customize the filtering row to allow just a custom control?
e.g. If I wanted to drop my own completely custom control into the filter row section (and I will handle the actual filtering my self, under the intention that I am just binding some text boxes to my view model and that it is handling the filtering of the item source)

The overall goal I want to achieve is to replace the existing filter row, with just a text box (with no operators control) so I can bind those to the view model to filter my items source (via async queries to web services)


---

I tried creating a derived class of the GridViewDataColumn where I expose a FilterEditor property. However, the issue I have with this approach is that:

1) I can not hide the filter operators (I have tried ShowFilterButton="False" ShowFieldFilters="False" ShowDistinctFilters="False" to no avail)

2) It takes 4 tabs to move between columns, and Ideally it should tab across directly. (As far as I can tell, the first table puts it into the filter operator, the second puts it into the drop down of the filter operators drop down, the third tab I have no idea where, and then finally the 4th moves the control to another column)

3) As mentioned in a previous post, the title does not shrink back down when the column header (or filter row) expands then shrinks (e.g. by typing in text, then removing it)




below is the code I used to create my custom column. (The FilterEditor content that I create is simply a textbox bound to my VM)

using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using Telerik.Windows.Controls;

public class CustomFilterGridViewDataColumn : GridViewDataColumn
{

    public static readonly DependencyProperty FilterEditorProperty =
        DependencyProperty.Register(
            "FilterEditor",
            typeof(UIElement),
            typeof(CustomFilterGridViewDataColumn),
            new PropertyMetadata(OnFilterEditorChanged));
    private static void OnFilterEditorChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        var me = (CustomFilterGridViewDataColumn)d;
        if (me._filterContainer == null) return;
        var uiElement = e.NewValue as UIElement;
        me._filterContainer.Content = null;
        if (uiElement != null) me._filterContainer.Content = uiElement;
    }


    private ContentControl _filterContainer;

    public UIElement FilterEditor
    {
        get { return (UIElement)GetValue(FilterEditorProperty); }
        set { SetValue(FilterEditorProperty, value); }
    }

    public override FrameworkElement CreateFieldFilterEditor()
    {
        _filterContainer = new ContentControl();
        if (FilterEditor != null) _filterContainer.Content = FilterEditor;

        Binding binding = new Binding();
        binding.Source = this.DataControl;
        binding.Path = new PropertyPath(FrameworkElement.DataContextProperty);
        binding.Mode = BindingMode.OneWay;
        BindingOperations.SetBinding(_filterContainer, FrameworkElement.DataContextProperty, binding);

        return _filterContainer;
    }

}

[Alex]

Version: 2014.2.729.1050


Further info on issue 3 (tab focus): The unknown control that receives focus appears to be the ContentControl (created by the Telerik control) that houses the filter row content (i.e. so when you tab out of one column, you will tab into the ContentControl of the next column before tabbing into it's content)

[Yoan]

Hello Alex,

In order to achieve your goal, you will have to predefine the template of our FilterRow. You can check this help article for a reference. As you can see, the StringFilterEditor is a TextBox + ToggleButton wrapped in a control. In order to hide the "aA" (the ToggleButton) you can delete it. Then you can predefine the FieldFilterControl's template and remove RadDropDownButton control (the funnel). Finally, you can set the IsTabStop property of the ContentControl (PART_FilterEditorContentControl) to false. In this way you will need only one tab to navigate through the textboxes. You can check the attached sample project for a reference. Please note that I am using our Implicit themes as demonstrated in this help article. You can check the changes I made in the Themes/ Telerik.Windows.Controls.GridView.xaml (you can find the "FieldFilterControlTemplate") and Telerik.Windows.Controls.xaml (you can find the "StringFilterEditorTemplate") files. 

As for your last question - I am afraid that I can not suggest you other solution for this requirement. Generally SizeToHeader will size the cells according to the column header and SizeToCells will size the cells according the cells content. Unfortunately, you can not use both - Column.Widht="Auto" and Column.Width="SizeToHeader". Other solution that you can try is to wrap the text in your filtering Textbox. 


Regards,
Yoan
Telerik

 

 

[Alex]

Hi Yoan,

Thanks for the help, I have resolved the first two issues using your suggestions (I had suspected that this would involve changing the control template). 
Can I make the suggestion for future releases of the grid view to change the ContentControl's IsTabStop to false by default


With regards to the third issue (Column width resizing):
I thought that GridViewLength.Auto meant that it would size to both cells and headers? This appears to be the behaviour when I set the value, it is just unable to decrease the width once it has been stretched by the header (but it does respect cell width decreasing). 

For now I've managed the 3rd issue by hooking the LayoutChanged event and forcing a manual re-evaluting of the width, then dispatching an action to reset the width back to auto. (This is not the most efficient way, as layout changed is fired many times)





------

Side note to any using my code in the original post, CreateFieldFilter can be called multiple times, so the FilterEditor needs to be detached from its previous parent before it can be reattached to a new one