MultiSelect Overview

The Kendo UI MultiSelect widget displays a list of options, allows multiple selections from that list, represents a richer version of the <select> element and provides support for local and remote data binding, item and tag templates, and configurable options for controlling the list behavior.

Initializing the MultiSelect

To initialize the MultiSelect, use the <option> tag of an existing <select> element with defined data items.

You can also initialize the DropDownList through binding it to local or remote data and then using the <select> element. For more information, refer to the article on data binding.

Regardless of the applied initialization, the performance and functionality of the MultiSelect are consistent. For a complete example, refer to the demo on the basic usage of the MultiSelect.

• When you initialize the MultiSelect, create it within a $(document).ready() statement because the widget has to be initialized after the DOM is fully loaded.
• The MultiSelect copies any styles and CSS classes from the input element to the wrapper element and visible input.

The following example demonstrates how to initialize the MultiSelect from an existing <select> element with defined data items.

<select id="multiselect">
    <option>Item 1</option>
    <option>Item 2</option>
    <option>Item 3</option>
</select>

<script>
    $(document).ready(function(){
        $("#multiselect").kendoMultiSelect();
    });
</script>

Functionality and Features

• Data binding
• Grouping
• Server filtering
• Virtualization
• Summary-tag mode
• Templates
• Adding new items
• Rendering and dimensions
• Globalization
• Accessibility

For more information on implementing specific scenarios, refer to the Knowledge Base section.

Events

For a complete example on the basic MultiSelect events, refer to the demo on using the events of the MultiSelect.

See Also

• Basic Usage of the MultiSelect (Demo)
• Using the Basic Events of the MultiSelect (Demo)
• Binding the MultiSelect over MVVM (Demo)
• Using the MultiSelect with AngularJS Directives (Demo)
• Applying the MultiSelect API (Demo)
• JavaScript API Reference of the MultiSelect