Edit this page

Scroll Selected Items

The following example demonstrates how to create a scrollable list of the selected items in a Kendo UI MultiSelect widget.

Example
<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

For more runnable examples on the Kendo UI MultiSelect, 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