Preventing MultiSelect Pop-up from Collapsing on Page Scroll
Environment
Product | Kendo UI for jQuery MultiSelect |
---|---|
Version | Current |
Description
When using the MultiSelect for Progress® Kendo UI®, the pop-up list closes upon scrolling the page. I want to configure the MultiSelect so that scrolling elsewhere on the page does not cause the pop-up to disappear.
This KB article also answers the following questions:
- How can I keep the MultiSelect pop-up open while scrolling the page?
- What settings prevent the MultiSelect drop-down from closing on page scroll?
- Is there a way to configure the MultiSelect pop-up to remain visible during page scrolls?
Solution
To prevent the MultiSelect pop-up from collapsing when the page is scrolled, attach a handler to the open
event of the MultiSelect. Within this handler, override the default behavior of the pop-up widget's close method.
Here is how you can achieve this:
- Initialize the MultiSelect and specify an
open
event handler.
$("#multiSelect").kendoMultiSelect({
dataSource: [/* DataSource goes here */],
open: onOpen
});
- Bind to the
window.scroll
event to change a boolean variable's value so that it can be used as flag
$(window).scroll(function() {
scroll = true;
setTimeout(function(e) {
scroll = false;
});
});
- In the
onOpen
event handler, override the pop-up's close method to prevent it from closing on scroll if the "scroll" boolean is set to "true".
open:function(e){
var popup = e.sender.popup;
popup.bind("close", function(e) {
if (scroll) {
e.preventDefault(); //prevent popup closing
}
});
}
Below you will find a complete example to demonstrate the approach:
<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>
var scroll = false;
$(function() {
$("#products").kendoDropDownList({
dataTextField: "ProductName",
dataValueField: "ProductID",
dataSource: {
transport: {
read: {
dataType: "jsonp",
url: "https://demos.telerik.com/kendo-ui/service/Products",
}
}
},
value: "74",
open:function(e){
var popup = e.sender.popup;
popup.bind("close", function(e) {
if (scroll) {
e.preventDefault(); //prevent popup closing
}
});
}
});
$(window).scroll(function() {
scroll = true;
setTimeout(function(e) {
scroll = false;
});
});
});
</script>