Kendo Drop down list positioning issue on scroll of the page

[saroj]

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

[Georgi Krustev]

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

[Besnik]

Hello Georgi

how can i do this in angular 9

[Aleksandar]

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

[Dzmitry]

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

[Ivan Danchev]

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

[Lee]

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);
}