New to Kendo UI for jQuery? Download free 30-day trial

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>

See Also

In this article