Scroll Selected MultiSelect Items
Environment
| Product | Progress® Kendo UI® MultiSelect for jQuery |
| Operating System | Windows 10 64bit |
| Visual Studio Version | Visual Studio 2017 |
| Preferred Language | JavaScript |
Description
How can I create a scrollable list of the selected items in a Kendo UI MultiSelect widget?
Solution
The following example demonstrates how to achieve the desired scenario.
<div id="example">
<style>
.myClass .k-multiselect-wrap
{
/* enable scrollability */
overflow: auto;
/* control selected items' container - use height or min-height and/or max-height */
max-height: 100px;
}
.myClass .k-multiselect-wrap .k-button {
/* force each selected item on a new line, if required */
clear: left;
}
</style>
<select id="required" multiple="multiple" data-placeholder="Select attendees..." style="width:200px">
<option selected>Steven White</option>
<option selected>Nancy King</option>
<option selected>Nancy Davolio</option>
<option selected>Robert Davolio</option>
<option selected>Michael Leverling</option>
<option selected>Andrew Callahan</option>
<option selected>Michael Suyama</option>
<option selected>Anne King</option>
<option>Laura Peacock</option>
<option>Robert Fuller</option>
<option>Janet White</option>
<option>Nancy Leverling</option>
<option>Robert Buchanan</option>
<option>Margaret Buchanan</option>
<option selected>Andrew Fuller</option>
<option>Anne Davolio</option>
<option>Andrew Suyama</option>
<option>Nige Buchanan</option>
<option>Laura Fuller</option>
</select>
</div>
<script>
$("#required").kendoMultiSelect({
select: onSelect
});
// set the custom class that applies all custom styling related to heights, scrollability and selected items arrangement
$("#required").data("kendoMultiSelect").wrapper.addClass("myClass");
function onSelect(e) {
setTimeout(function() {
// scroll the selected items' container to its bottom
var container = e.sender.wrapper.children(".k-multiselect-wrap");
container.scrollTop(container[0].scrollHeight);
});
}
</script>