How to prevent Javascript from folding a Kendo dropdown on a Scroll page?

Question

I ran into a strange problem and tried to implement 3 solutions, but for me it did not work.

The problem is that the Kendo Drop Down function is used by default to mark up the external page. I want to prevent clotting and do some research.

I have a solution here to prevent this, but it works fine in the Preview section shown there, but the same doesn't work under Dojo (top right link) and in a real project.

There is no difference that I see that prevents the dropdown from collapsing in Preview and not in Dojo .

Please help me solve the same thing that I am new to Kendo.

Answer 1

I believe that you need to handle the close widget event 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 am linking this so that you can take advantage of your class attributes. You can delete it if you want. A kendo widget instance is available under the e.sender object .

Here is a link to Docs . Hope it helps.

Answer 2

 $(".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();
            }
        });
    }
});

Answer 3

, , , .

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