Turning off autocomplete on column filtering

[Wei Wei]

Hi,

Is there any way to turn off the builtin autocomplete feature for column filters? Previously, the workaround I used to disable that feature was using a empty datasource, but with the latest updates of KendoUI, that workaround no longer works.

[Darold]

Based on Nelson answer, I added operator and suggestionOperator:

var noAutoFilter = {
    operator: "contains",
    suggestionOperator: "contains",
    template: function (e) {
        e.element.kendoAutoComplete({
            serverFiltering: false,
            valuePrimitive: true,
            noDataTemplate: ''
        });
    }
}

 

then you can use that variable in your column properties.

[Alex Hajigeorgieva]

Hello Wei Wei,

I have already responded to the support ticket you have submitted but I will add my response here as well, in case anyone else needs to know how to change the template of the row filterable Kendo UI Grid.

If you wish to keep the input element on that column, you can pass an empty function to the columns filterable cell template configuration option:

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-columns.filterable.cell.template

The columns filterable cell template will give you access to the input element and you can style it to match the Kendo UI theme by adding the "k-textbox" class to it or just leave that function empty to get a standard input element.

Alternatively, you may use the columns filterable cell template configuration to create a Kendo UI DropDownList, ComboBox or another widget of your preference. 

I prepared a sample demo illustrating these options at:

http://dojo.telerik.com/ikaYU

Regards,
Alex Hajigeorgieva
Telerik by Progress

 

[Nelson]

I've created a custom template for the kendoAutoComplete to turn off serverFiltering and remove the 'No Data Found' message. I would like to avoid setting the filterable value on each column.

Is there any way I can have this custom template be the default autoComplete? 

var noServerFilterAuto = {
    template: function (e) {
        e.element.kendoAutoComplete({
            serverFiltering: false,
            valuePrimitive: true,
            noDataTemplate: ''
        });
    }
}

 

{ field: "ProductName", title: "Product", width: 180, filterable: { cell: noServerFilterAuto } }

 

Ive attached a DOJO
http://dojo.telerik.com/eTese

[Alex Hajigeorgieva]

Hello Nelson,

It is possible to override the FilterCell template in a way similar to the one shown for the FilterCell operators at:

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-filterable.operators

However, with this approach, using the public API only, you will override all the FilterCell templates, not just the template generated for type string(the Kendo UI NumericTextBox, DatePicker etc. will be gone as well):

http://dojo.telerik.com/OReXeQ

There are two ways to achieve the global override of some data types and not others - one would require overriding a private method which will not be subject to support and may be changed in the future.

The other one is to wrap the Kendo UI Grid and make your own jQuery plugin based on it. This way you may specify how the filter cell template should be generated.

Kind Regards,
Alex Hajigeorgieva
Telerik by Progress

[Joel]

[quote]Alex Hajigeorgieva said:Hello Wei Wei,

I have already responded to the support ticket you have submitted but I will add my response here as well, in case anyone else needs to know how to change the template of the row filterable Kendo UI Grid.

If you wish to keep the input element on that column, you can pass an empty function to the columns filterable cell template configuration option:

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-columns.filterable.cell.template

The columns filterable cell template will give you access to the input element and you can style it to match the Kendo UI theme by adding the "k-textbox" class to it or just leave that function empty to get a standard input element.

Alternatively, you may use the columns filterable cell template configuration to create a Kendo UI DropDownList, ComboBox or another widget of your preference. 

I prepared a sample demo illustrating these options at:

http://dojo.telerik.com/ikaYU

Regards,
Alex Hajigeorgieva
Telerik by Progress

 

[/quote]

 

The example you provided does not work in IE11, is there an example you can give to solve this across browsers? It does work in Chrome...

 

Thanks

 

Joel

[Joel]

Appears IE11 didn't respect the enter key but Chrome does. I simply wired the event via template...

 

    function autoFilter(e){
        e.element.addClass('k-textbox').keydown(function(e){
            setTimeout(function(){
                var keyCode = (e.keyCode ? e.keyCode : e.which);
                if (keyCode == 13) {
                    $(e.target).trigger('change');
                }
            });
        });
    }   

 

[Stefan]

Hello, Joel,

I'm glad that the desired result is achieved.

Also, another option will be to set a large enough number for the min length property of the AutoComplete which will ensure that the suggestions will not be shown:

https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/columns.filterable.cell#columns.filterable.cell.minLength

The suggestion provided by my colleague is cleaner, but this could be considered as a last resort option if something change in the future.

Regards,
Stefan
Progress Telerik

[Joe]

I decided to implement Stefan's solution.  I am not sure there is anything cleaner from my perspective.  I realize the dropdown is suppose to be helpful, but functionally, it's more of a nuisance when there is no matching data.  I think it makes more sense to not show the dropdown if there is no data.  Intuitively I think users will understand that if there are no results then none will be shown.  Who wants a blank white container dropping down blocking the view of the grid?  I haven't been introduced to that user.  Thank you.