Filter grid while typing the search box

[Roelande]

Hello,

Is there a way to filter the grid directly while typing without the need to hit the enter key?

For example when i type "b" in the name search box the grid show me all products with a "b" in it.

I couldn't find documentation regarding the possibility about this.

Thank you.

[Georgi]

Hello Roelande,

Possible solution is to create custom filter widget. Once the change event of the filter input is triggered the filter method is called.  So you can execute the filtration by manually triggering the change event when the user types:

Column with custom filter in row filtering mode:

columns.Bound(x => x.YourColumn)
.Filterable(x=> x.Cell(y => y.Template("template").ShowOperators(false).Operator("contains")));

The template function:

function template(args) {
   args.element.css("width", "100%").addClass("k-textbox").on('input', function (e) {
        $(e.target).trigger("change");
   })
}

For your convenience I have assembled small sample (filter-as-you-type-mvc.zip) which illustrates the aforementioned approach.


Regards,
Georgi
Progress Telerik

[Jon]

Awesome!  Thanks!

To make mine look/feel like the adjacent built-in filters, I added the same classes to the parent span and used k-input-inner instead of k-textbox.  Also, to help convince the browser to stop trying to autofill, I added an autocomplete attribute.

function template(args) {
    args.element
        .css("width", "100%")
        .attr("autocomplete", "do-not-autofill")
        .addClass("k-input-inner")
        .parent('span').addClass("k-autocomplete k-input k-autocomplete-clearable k-input-solid k-input-md k-rounded-md")
        .on('input', function (e) {
        $(e.target).trigger("change");
    })
}

[Anton Mironov]

Hi Jon,

Thank you for sharing this improvement with the community.

Feel free to contact me and the team if further assistance or information is needed.

Kind Regards,
Anton Mironov

[Roelande]

Hi Georgi,

That was what I was looking for. Thank you