Prevent Popup Closure on Scrolling the DropDownList

Environment

Product	Progress® Kendo UI® DropDownList for jQuery
Operating System	Windows 10 64bit
Visual Studio Version	Visual Studio 2017
Preferred Language	JavaScript

Description

When the popup item list of the DropDownList is open and the user scrolls it to the end, the browser starts scrolling the page which closes the drop-down list itself. How can I prevent this behavior?

Solution

The DropDownList enables you to make the popup remain open in such cases. The following example demonstrates how to achieve this behavior.

<div id="example">
    <br/><br/><br/><br/><br/><br/><br/><br/>
    <div id="example" style="min-height: 2000px; padding: 30px;">
        <input id="products" style="width: 400px" />
    </div>
</div>

<script>
    $(function() {
          $("#products").kendoDropDownList({
            dataTextField: "ProductName",
            dataValueField: "ProductID",
            dataSource: {
              transport: {
                read: {
                  url: "https://demos.telerik.com/service/v2/core/Products",
                }
              }
            },
            value: "74"
          });

          var widget = $("#products").data("kendoDropDownList");

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

          });
        });
</script>

See Also

• JavaScript API Reference of the DropDownList
• Automatically Adjust the Width of a DropDownList
• Create DropDownLists with Long Items
• Detect Wrapper Focus Events
• Move the Group Label on Top of Items
• Remove Items
• Set DataSource Dynamically
• Update MVVM Bound Models on Load