CODEWITHSUNDEEP
javascriptkendo-uikendo-dropdown
Saggy
Saggy

Reputation: 624

How to Prevent Collapsing of Kendo Dropdown List on Page Scroll using Javascript?

I am facing a weird issue and tried to implement 3 solutions but it didn't worked out for me.

The problem is with the default functionality of kendo dropdown collapsing on outer page scroll. I want to prevent the collapsing and did some research.

I have got a solution here to prevent this but this is working fine under the Preview section shown there but the same is not working under Dojo (the upper right link) and in the real project.

There is no difference I can see which prevents the collapsing of Dropdown in Preview and not in Dojo.

Please, help me resolving the same as I am a newbie in Kendo.

Upvotes: 4

Views: 2355

Answers (3)

Mike Davis
Mike Davis

Reputation: 68

I've found this simple snippet to reliably disable page scrolling as long as a kendo dropdownlist is open and the mouse is hovered over the list options.

// Fix annoyance where entire page scrolls when you scroll to the bottom of a dropdown
$(document).bind('mousewheel DOMMouseScroll', function (e) {
    var kendoDropdownBoxes = $('.k-list-container[style*="display: block"]');
    if (kendoDropdownBoxes.length > 0 && kendoDropdownBoxes.is(':hover')) {
        $("body").css("overflow", "hidden");
    } else {
        $("body").css("overflow", "auto");
    }
});

Upvotes: 0

Mahesh Dhage
Mahesh Dhage

Reputation: 1

 $(".k-list-container").each(function () {
    var elementId = this.id.split("-")[0];
    var widget = $("#" + elementId).data("kendoDropDownList");
    if (widget) {
        widget.ul.parent().on("wheel", function (e) {
            var container = this;
            if ((container.scrollTop == 0 && e.originalEvent.deltaY < 0) ||
                (container.scrollTop == container.scrollHeight - container.offsetHeight && e.originalEvent.deltaY > 0)) {
                e.preventDefault();
                e.stopPropagation();
            }
        });
    }
});

Upvotes: 0

Ron
Ron

Reputation: 399

I believe that you need to handle the close event of the widget in order to control this behavior. Here is an example:

 <input id="dropdownlist" />
    <script>
        $("#dropdownlist").kendoDropDownList({
          dataSource: [ "text1", "text2" ],
          close: _myClose.bind(this)
        });

        var _myClose = function (e) {
            var wish = true;
            var element = e.sender;
            if (wish) {
                e.preventDefault();
            }
        };
</script>

I bind this so that you can have the advantage of your class attributes. You can remove it if you want. The kendo widget instance is available under the e.sender object.

Here is the link to the Docs. Hope it helps.

Upvotes: 1

Related Questions