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: {
dataType: "jsonp",
url: "https://demos.telerik.com/kendo-ui/service/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>