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

Kendo Drop down list positioning issue on scroll of the page

4 Answers 1378 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
saroj
Top achievements
Rank 1
saroj asked on 13 Jan 2014, 08:53 PM
Hi Support,

I am using kendo drop down list in grid.
I am facing an issue on scroll of the page when the drop down was opened while edit/add in grid. (See attachment) 
When kendo ui drop down opened try to scroll with the mouse wheel, the kendo dropdown list is detaching from it and moving on the page with the scroll.

Is there any fix for this to make it close on scroll .
To produce the scenario :-  
1>  open the drop down list using mouse scroll wheel move the page up/down .
2> List also will move to up and down by detaching from the element

Any help much appreciated.
thanks in advance

Saroj

4 Answers, 1 is accepted

Sort by
0
Georgi Krustev
Telerik team
answered on 14 Jan 2014, 12:48 PM
Hello Saroj,

Widgets with popup elements, like DropDownList, are designed to close the popup elements on window scroll. If the widget is placed in scrollable container then the developer is responsible for closing the popup elements. This easily can be done by closing all popup elements put in the body. Check this jsFiddle demo for more information.

Regards,
Georgi Krustev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Besnik
Top achievements
Rank 1
answered on 11 Dec 2020, 06:33 PM

Hello Georgi

how can i do this in angular 9

0
Aleksandar
Telerik team
answered on 15 Dec 2020, 09:48 AM

Hi Besnik,

I can suggest reviewing the approach suggested on handling the open state of the options list in the documentation here:

https://www.telerik.com/kendo-angular-ui/components/dropdowns/dropdownlist/open-state/#toc-preventing-opening-and-closing

Note also that the current thread is related to the DropDownList for ASP.NET MVC, so I will ask you if the above does not help resolve the case to open a new thread in the respective forum here:

https://www.telerik.com/forums/kendo-angular-ui/dropdownlist

Regards,


Aleksandar
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Dzmitry
Top achievements
Rank 1
commented on 15 Jun 2023, 03:27 PM | edited

Is there a native solution for this kind of situation in kendo-react?

Ivan Danchev
Telerik team
commented on 19 Jun 2023, 11:45 AM

Hello Dzmitry,

For questions on the Kendo UI React components, please refer to the Kendo UI React forums: https://www.telerik.com/forums/kendo-ui-react

0
Lee
Top achievements
Rank 2
Bronze
Bronze
Bronze
answered on 27 Mar 2024, 08:23 PM

I have a similar issue with Kendo UI Jquery's DropdownTree. Here is my solution

 


$(window).on("resize, scroll", function () {
    throttle(function () {
        $.each($(".k-dropdowntree[aria-expanded=true]"), function (index, element) {
            $(".k-animation-container").hide();
            $(element).find("select").data("kendoDropDownTree").close();
        });
    });
});

let throttleWait = false;
function throttle(func, delay = 300) {
    if (throttleWait) {
        return;
    }
    func();
    throttleWait = true;
    setTimeout(() => {
        throttleWait = false;
    }, delay);
}

Tags
DropDownList
Asked by
saroj
Top achievements
Rank 1
Answers by
Georgi Krustev
Telerik team
Besnik
Top achievements
Rank 1
Aleksandar
Telerik team
Lee
Top achievements
Rank 2
Bronze
Bronze
Bronze
Share this question
or