RadGridView Filter as user Types

[Sintayehu]

Hi,

I have enabled filtering on a RadGridView with FilteringMode of FilterRow. What I need is to make the Filter boxes filter as User Types. In a similar way the "Search as you type" demo works.

Is there a way to customize this default Filter Editors (StringFieldEditors) to filter as user types.

I have already looked at the live Demo and also read http://www.telerik.com/help/silverlight/gridview-filtering-howto-customize-the-default-field-filter-editor.html and http://www.telerik.com/help/silverlight/gridview-filtering-howto-create-a-custom-field-filter-editor.html.

Thanks!

[Rossen Hristov]

Hello,

I have attached a sample project that does what you describe. It is for WPF, but since our WPF and Silverlight controls share the same codebase, the same code applies for Silverlight as well. 

This is the important part which modifies the existing text box editor to update its binding on every key stroke:

private void RadGridView_FieldFilterEditorCreated(object sender, Telerik.Windows.Controls.GridView.EditorCreatedEventArgs e)
{
    var stringFilterEditor = e.Editor as StringFilterEditor;

    if (stringFilterEditor != null)
    {
        e.Editor.Loaded += (s1, e1) =>
        {
            var textBox = e.Editor.ChildrenOfType<TextBox>().Single();
            textBox.TextChanged += (s2, e2) =>
            {
                textBox.GetBindingExpression(TextBox.TextProperty).UpdateSource();
            };
        };
    }
}

With this code, the filtering will be re-applied on every character that the user enters. Beware -- this might negatively affect performance if you are filtering over a lot of data -- that is your call.
 
Can you take a look at my sample project and see whether the code inside can solve your requirement.

Let me know if there are problems.

All the best,

Rossen Hristov
the Telerik team

[Sintayehu]

Thank You Rossen!

Your solution works, however the TextBox used inside the "StringFilterEditor" looses focus when updating the source. So I had to refocus it after update:

textBox.TextChanged

            {

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


            };



As a mater of fact if it wasn't for the focus issue; I have come across a xaml only solution to this problem.

The xaml solution is basically re-templating the StringFilterEditor, and making the textbox's timing of the binding source update
using "UpdateSourceTrigger=PropertyChanged".


<ControlTemplate x:Key="StringFilterEditorTemplate" TargetType="Editors:StringFilterEditor">
        
<TextBox Grid.Column="0" Text="{Binding Text, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent},UpdateSourceTrigger=PropertyChanged}"/>

I would have really liked to keep it in the template.

Let me know if there is a solution for the focus issue. Seems to me that the Grid takes over the focus after getting updated by the filter.


***
As far as performance goes, I have only tested it with in memory data so far and it seems ok enough. But refocusing the text box seems to create a typing delay.

[Rossen Hristov]

Hi,

Unfortunately, I have been unable to come with a workaround for the focus issue. The thing is that when you type a single character, the whole filtering data operation kicks in under the hood and the entire grid is completely refreshed so a lot of things need to happen and apparently getting the focus is one of them. Filtering was never meant to be "real-time" by design, i.e. after each character is typed, for performance reasons (imagine going to a server and back with WCF RIA Services for example), so what we are doing here is kind of a hack.

Greetings,
Rossen Hristov
the Telerik team

[Sintayehu]

Rossen,

We are going to use the "filter as you type" functionality for in memory data only. And the typing delay that is caused by calling txtbox.Focus() on each key press doesn't seem to be big of an issue for the people who have helped me test it. So we are planing to move to UAT and see how it is perceived.

On another note : I am having problems with the filter control's textbox validation. If the columns datatype is an int, and user enters a string, the text box shows a format exception error. Which is good, but I have no control over that validation message [seems to me that it is directly coming from silver light itself].  And the demo site only shows columns of string type.

Issues I came across are:

1 - If user does not have a developers version of silverlight, the validation text is a link to some Microsoft page that has the actual message.

2 - if my column is fo example a price column, how would I intercept and display my own validation message.

I know i am not posting this in the right spot, but since this is related can you please direct me to the right place or attach an example. At the very least i would like to know how to disable the validation.

Thanks!

[Rossen Hristov]

Hello,

 
1) Other users reported this issue, so we are now throwing our own exception with a localizable message. Localization is described here. The key of the exception message is FilterEditorFormatExceptionMessage. By using localization you can change this message to anything,
 
2) You have two options for this -- either take the existing field filter editor and modify it somehow to match your needs or provide your very own field filter editor control. The bottom line is that a proper value should reach the Value property on our filtering view model through the two-way Binding of the field filter editor's significant property.

I hope this helps. Let me know if you encounter any problems.

All the best,
Rossen Hristov
the Telerik team

[Sintayehu]

Hi,

It is good to hear that you guys are throwing your own Validation Errors. Unfortunately we are still on Version [2012.2.725.1050], and therefore not helpful for us in this sprint.

**However the second solution you pointed me to is exactly what I need. And so I am supplying my own custom control that allows Numbers Only (Sort of like and extension to a RadNumericTextBox). And make sure that "Value" that might raise an exception doesn't get to telerik's Filtering ViewModel.

As an FYI:

Providing a custom field filter editor control doc mentions everything except demo how that is to be used in the xaml view so I have copied how I am using it here for someone who might be wondering how.

In the Grid view:
...
<telerik:RadGridView.Columns>
       <MyControls:GridViewMyCustomColumn DataMemberBinding="{Binding someValue}" Header="Some Value"/>
       <telerik:GridViewDataColumn DataMemberBinding="{Binding someValue}" Header="Some Value"/>

...

Thanks for the help!!