Edit this page

Prevent Popup Closure on Scroll

Normally, when the popup item list is open and the user scrolls it to the end, the browser starts scrolling the page which closes the drop-down list itself.

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

Important

The Kendo UI 2014.3 and earlier versions require a different approach from the one demonstrated in the example. If you use any of these versions, you can prevent the closure of the popup by implementing the stopScroll(widget.ul); configuration instead of the stopScroll(widget.ul.parent()); one.

Example
<div id="example">
    <div class="demo-section k-header">
        <h4>Products</h4>
        <input id="products" style="width: 400px" />
    </div>

    <script>
        function stopScroll(element) {
          var activeElement;

          $(document).bind('mousewheel DOMMouseScroll', function(e) {
              var scrollTo = null;

              if (!$(activeElement).closest(".k-popup").length) {
                return;
              }

              if (e.type == 'mousewheel') {
                  scrollTo = (e.originalEvent.wheelDelta * -1);
              }
              else if (e.type == 'DOMMouseScroll') {
                  scrollTo = 40 * e.originalEvent.detail;
              }

              if (scrollTo) {
                  e.preventDefault();
                  element.scrollTop(scrollTo + element.scrollTop());
              }
          });

          $(document).on('mouseover', function(e) {
                activeElement = e.target;
          });
        }

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

            stopScroll(widget.ul.parent());
        });
    </script>

    <style scoped>
        #example { min-height: 1200px; padding: 30px; }

        .demo-section {
            width: 400px;
        }
        .demo-section h2 {
            text-transform: uppercase;
            font-size: 1.2em;
            margin-bottom: 10px;
        }
    </style>
</div>

See Also

For more runnable examples on the Kendo UI DropDownList, browse its How To documentation folder.

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy