Premium forums

AutoComplete Filter/Drop-Down List Display Issue Cancel

• Zoran

  
  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

  • AutoCompleteFilterDisplayIssue.jpg
• Georgi Krustev

  
  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!
• 1zias01

  
  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="width: 525px;" />
                  
                     <style scoped>   
                      .k-autocomplete {
                          vertical-align: middle;
                      }
                     </style>

  
  
  

      $("#SearchBox").kendoAutoComplete({
          minLength: 2,
          dataTextField: "VenueName",
          dataSource: {
              type: "json",
              severFiltering: true,
              serverPaging: true,
              transport: {
                  read: "Services/SomeService.svc/GetBusinessVenues",
                  parameterMap: function () {
                      return { venueName: $('#SearchBox').val(), reviewStatusId: '1' };
                  }
              }
          }
      });

  
  
• Rolando Rosales

  
  01 Aug 2012 (Link to this post)

  i am experiencing the same thing.... any updates on this display issue yet?
  
  thanks
• Georgi Krustev

  
  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!
• Rolando Rosales

  
  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,