AutoComplete Filter/Drop-Down List Display Issue

8 posts, 0 answers
  1. Zoran
    Zoran avatar
    3 posts
    Member since:
    Dec 2011

    Posted 07 Feb 2012 Link to this post

    I noticed this issue on one of my auto complete sections.  If the autocomplete is close to the bottom of the browser window and the user is filtering, the drop-down list will show above the autocomplete field, which, is a nice feature.  However, if the user continues to type and narrow down the results, then the drop-down list hangs in the air.  (See attached image).  

    This only happens if the filter area shows above the autocomplete and the user continues to narrow down the search.  If the filter area shows below the autocomplete and the user does the same thing this does not happen.  

    This is more evident if you set choose to set the configuration of the drop-down list to a larger height. (height:500).  I was able to reproduce this in Chrome, FF, IE.  See attached image, to see it reproduced on the live KendoUI demo.

    Any ideas on how to fix this or when I could expect a fix?

    Thanks,

    Zoran
  2. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3706 posts

    Posted 08 Feb 2012 Link to this post

    Hi Zoran,

    This is a known issue. We will schedule it for further investigation and will try to improve the described behavior for the next official release. 

    Regards,
    Georgi Krustev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. 1zias01
    1zias01 avatar
    12 posts
    Member since:
    Sep 2012

    Posted 11 Feb 2012 Link to this post

    Also getting this issue.

    Also the results don't show up at all in IE7 and 8.

    Here's some code:

      <input id="SearchBox" style="width525px;" />
                    
                       <style scoped>   
                        .k-autocomplete {
                            vertical-alignmiddle;
                        }
                       </style>


        $("#SearchBox").kendoAutoComplete({
            minLength2,
            dataTextField"VenueName",
            dataSource: {
                type"json",
                severFilteringtrue,
                serverPagingtrue,
                transport: {
                    read"Services/SomeService.svc/GetBusinessVenues",
                    parameterMapfunction () {
                        return { venueName$('#SearchBox').val(), reviewStatusId'1' };
                    }
                }
            }
        });

  5. Rolando Rosales
    Rolando Rosales avatar
    3 posts
    Member since:
    Apr 2006

    Posted 01 Aug 2012 Link to this post

    i am experiencing the same thing.... any updates on this display issue yet?

    thanks
  6. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3706 posts

    Posted 02 Aug 2012 Link to this post

    Hello,

    It is in our TODO list and we will try to to fix it for the upcoming Service Pack or for the Q3 release of Kendo UI.  

    Regards,
    Georgi Krustev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  7. Rolando Rosales
    Rolando Rosales avatar
    3 posts
    Member since:
    Apr 2006

    Posted 02 Aug 2012 Link to this post

    Thanks for the update.

    Just an FYI, for now, i added a work around that maintains the height of the listbox when rendering upwards (usually when at the bottom of a page/window).

    pay attention to the Transport -> Schema- > Total portion of the code, i added the following before i returned the data.length.

    Code Added:
    // TODO: remove this work when upgrade to new Kendo 2012 Q3 version
                        var $container = $('.k-list-container.RestfulAutoCompleteContainer.k-state-border-down');
     
                        if (data.length < input.pageSize && $container.length > 0) {
                            $container.attr('style', $container.attr('style') + '; min-height: 285px !important;');
                        }


    Full Code:
    RestfulAutoComplete.dataSources[input.id] = new kendo.data.DataSource({
                serverFiltering: true,
                serverPaging: true,
                transport: {
                    read: {
                        url: input.dataUrl,
                        dataType: 'json',
                        data: function () {
                            return {
                                pageSize: input.pageSize,
                                filterArgs: input.onClientItemsRequesting, // listen to client-side event for filter arguments
                                partialSearchText: function () {
                                    return $input.val();
                                },
                                format: 'json'
                            };
                        }
                    }
                },
                schema: {
                    data: function (data) {
                        return data;
                    },
                    total: function (data) {
     
                        // TODO: remove this work when upgrade to new Kendo 2012 Q3 version
                        var $container = $('.k-list-container.RestfulAutoCompleteContainer.k-state-border-down');
     
                        if (data.length < input.pageSize && $container.length > 0) {
                            $container.attr('style', $container.attr('style') + '; min-height: 285px !important;');
                        }
     
                        return data.length;
                    },
                    type: 'json'
                },
                error: function (e) {
                    alert('An error occured when attempting to load a RESTful datasource for AutoComplete with id "' + input.id + '": ' + e[2]);
                }

    Note: i have a custom class RestfulAutoCompleteContainer added to the listbox, you should be fine not including it in the selector

    Thanks,
  8. Rolando Rosales
    Rolando Rosales avatar
    3 posts
    Member since:
    Apr 2006

    Posted 12 Jun 2013 Link to this post

    Hi,
    any update on the fix for this yet?

    Thanks,

    Rolando
  9. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3706 posts

    Posted 17 Jun 2013 Link to this post

    Hello Rolando,

     
    I believe that this issue was addressed in Q3 2012 release of Kendo UI. I will suggest you download the latest official release of Kendo UI and give it a try.

    Regards,
    Georgi Krustev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
Kendo UI is VS 2017 Ready