Clear icon (x) causes unfiltered read from remote data source

4 posts, 0 answers
  1. Richard
    Richard avatar
    145 posts
    Member since:
    Feb 2012

    Posted 08 Oct 2017 Link to this post

    This issue is occurring in Chrome, I have not tried other browsers.

    The issue can be observed in demo http://demos.telerik.com/kendo-ui/autocomplete/serverfiltering

    Note the minLength: 3 setting.

    Type in "che" per the hint.  Developer tools network activity will show the $filter parameter as [ substringof('che',tolower(ProductName)) ]. All fine and good.

    Now clear "che" by clicking on clear (x).  The network activity tab will show a Products call back with a $filter parameter [ substringof('',tolower(ProductName)) ].  The minLength setting was obviously ignored and the filter actually pulls _all_ the data from the remote source.  In the example it is 77 items.   For real world scenarios an unfiltered query could return an application destroying amount of data.  Despite pulling all the data, no suggestions are shown -- I presume because at this point the minLength is honored and thus no suggestions

    Q:  How can I prevent an unfiltered query when clear clicked ?

    Q: How can I force the autocomplete data source to have no items when clear is clicked ?

    Thanks, Richard

  2. Nencho
    Admin
    Nencho avatar
    1745 posts

    Posted 10 Oct 2017 Link to this post

    Hello Richard,

    This behavior is intentional because it was largely requested. Many of the client's use-cases required to have all items loaded. This is the reason why, we left this behavior as default in scenarios where the minLength is used.

    However, in order to achieve your behavior, you can set the enforceMinLength to true. Hence, the value of the minLength will be always respected and no items will be loaded, when the filter string is cleared:

    https://docs.telerik.com/kendo-ui/api/javascript/ui/autocomplete#configuration-enforceMinLength

    Regards,
    Nencho
    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.
  3. Richard
    Richard avatar
    145 posts
    Member since:
    Feb 2012

    Posted 10 Oct 2017 in reply to Nencho Link to this post

    Hi Nencho,

    Thanks for the explanation.  I know this forum is KendoUI, but I am configuring the autocomplete component in an asp net mvc view.  The visual studio razor helper for autocompelete does have an option for .MinLength(n), however, I did not see anything for turning on .EnforceMinLength(true).  How would I turn on enforcement in this situation ?

  4. Nencho
    Admin
    Nencho avatar
    1745 posts

    Posted 12 Oct 2017 Link to this post

    Hello Richard,

    Indeed, this option is not available for the ASP.NET MVC and Core Wrappers at the time being. This is why, I have logged this as an enhancement in our public repository, where you can track the item:

    https://github.com/telerik/kendo-ui-core/issues/3672

    As a workaround, you can get a reference to the autocomplete widget and set the option through the setOptions method and overwrite the following method:

    <script>
        $(document).ready(function (e) {
     
            var autoComplete = $("#countries").getKendoAutoComplete();
            autoComplete.setOptions({ enforceMinLength: true })
        })
        kendo.ui.List.fn._clearValue = function () {
            this._clearText();
            this._accessor("");
            this.listView.value([]);
            if(this._isFilterEnabled() && !this.options.enforceMinLength) {
                this._filter({word: "", open: false});
            }
            this._change();
        }
    </script>

    In addition, I have updated your Telerik Points for pointing the lack out.

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