MultiSelect Overview
The MultiSelect displays a list of options and allows multiple selections from this list.
The widget 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.
The MultiSelect is part of Kendo UI for jQuery, a
professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
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 MultiSelect 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
inputelement to thewrapperelement 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
Events
For a complete example on the basic MultiSelect events, refer to the demo on using the events of the MultiSelect.