Turning off autocomplete on column filtering

8 posts, 0 answers
  1. Wei Wei
    Wei Wei avatar
    1 posts
    Member since:
    Feb 2016

    Posted 25 Oct 2016 Link to this post

    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.

  2. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    1082 posts

    Posted 27 Oct 2016 Link to this post

    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
     
    Build rich, delightful, *native* Angular 2 apps with Kendo UI for Angular 2. Try it out today! Kendo UI for Angular 2 (currently in beta) is a jQuery-free toolset, written in TypeScript, designed from the ground up to offer true, native Angular 2 components.
  3. Nelson
    Nelson avatar
    2 posts
    Member since:
    Nov 2015

    Posted 08 Feb 2017 Link to this post

    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

  4. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    1082 posts

    Posted 10 Feb 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Joel
    Joel avatar
    3 posts
    Member since:
    Aug 2011

    Posted 01 Mar 2018 in reply to Alex Hajigeorgieva Link to this post

    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

     
    Build rich, delightful, *native* Angular 2 apps with Kendo UI for Angular 2. Try it out today! Kendo UI for Angular 2 (currently in beta) is a jQuery-free toolset, written in TypeScript, designed from the ground up to offer true, native Angular 2 components.

     

    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

  6. Joel
    Joel avatar
    3 posts
    Member since:
    Aug 2011

    Posted 01 Mar 2018 in reply to Joel Link to this post

    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');
                    }
                });
            });
        }   

     

  7. Stefan
    Admin
    Stefan avatar
    3073 posts

    Posted 05 Mar 2018 Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  8. Joe
    Joe avatar
    9 posts
    Member since:
    Nov 2013

    Posted 14 Jan in reply to Stefan Link to this post

    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.
Back to Top