This is a migrated thread and some comments may be shown as answers.

AutoComplete Filter/Drop-Down List Display Issue

7 Answers 689 Views
AutoComplete
This is a migrated thread and some comments may be shown as answers.
Zoran
Top achievements
Rank 1
Zoran asked on 07 Feb 2012, 10:10 PM
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

7 Answers, 1 is accepted

Sort by
0
Georgi Krustev
Telerik team
answered on 08 Feb 2012, 09:36 AM
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!
0
1zias01
Top achievements
Rank 2
answered on 12 Feb 2012, 01:31 AM
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' };
                }
            }
        }
    });

0
Rolando Rosales
Top achievements
Rank 1
answered on 01 Aug 2012, 04:22 PM
i am experiencing the same thing.... any updates on this display issue yet?

thanks
0
Georgi Krustev
Telerik team
answered on 02 Aug 2012, 12:42 PM
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!
0
Rolando Rosales
Top achievements
Rank 1
answered on 02 Aug 2012, 04:36 PM
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,
0
Rolando Rosales
Top achievements
Rank 1
answered on 12 Jun 2013, 07:11 PM
Hi,
any update on the fix for this yet?

Thanks,

Rolando
0
Georgi Krustev
Telerik team
answered on 17 Jun 2013, 08:08 AM
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!
Tags
AutoComplete
Asked by
Zoran
Top achievements
Rank 1
Answers by
Georgi Krustev
Telerik team
1zias01
Top achievements
Rank 2
Rolando Rosales
Top achievements
Rank 1
Share this question
or