Kendo UI for Angular MultiSelect Overview
The Kendo UI for Angular MultiSelect is a form component that displays a list of options and allows for multiple selections from this list.
It is a richer version of the <select> element and supports item and tag templates, and configurable options for controlling the list behavior.
The following example demonstrates the MultiSelect in action.
Example
View Source
Change Theme:
Key Features
- Data binding—You can bind the MultiSelect to a list of possible values containing arrays of primitive or complex data.
- Value binding—The MultiSelect enables you to set its value to primitive or complex data.
- Custom values—You can override the default behavior of the MultiSelect and configure it to accept custom values.
- Checkboxes—The MultiSelect allows you to implement checkboxes for managing its items selection.
- Filtering—Apart from its default filter functionality, the MultiSelect provides options for setting a minimum length of the search symbols and a built-in filter directive.
- Grouping—You can group MultiSelect items and display them as a grouped result.
- Virtualization—The MultiSelect supports a virtualization mechanism which noticeably improves the performance of the component when it handles large datasets.
- Disabled items—You can disable any of the MultiSelect items and prevent users from interacting with them.
- Summary-tag mode—The MultiSelect allows you to customize the display of its selected tags.
- Templates—You can customize the content of the MultiSelect by using templates for its tag, header, footer, and other elements.
- Forms support—You can use the MultiSelect both in template-driven and reactive Angular forms.
- Controlling the open state—The MultiSelect enables you to configure the initially opened item and prevent the opening and closing of its options list.
- Globalization—All Kendo UI for Angular Dropdowns provide globalization options.
- Accessibility—The MultiSelect is accessible for screen readers and supports WAI-ARIA attributes.
- Keyboard navigation—The MultiSelect supports a number of keyboard shortcuts for processing various commands.
To learn more about the appearance, anatomy, and accessibility of the MultiSelect, visit the Progress Design System documentation—an information portal offering rich component usage guidelines, descriptions of the available style variables, and globalization support details.
Support and Learning Resources
- MultiSelect Homepage
- Getting Started with the Kendo UI for Angular Dropdowns
- API Reference of the MultiSelect
- Getting Started with Kendo UI for Angular (Online Guide)
- Getting Started with Kendo UI for Angular (Video Tutorial)
- Virtual Classroom (Training Courses for Registered Users)
- MultiSelect Forum
- Before You Start: All Things Angular (Telerik Blog Post)
- Knowledge Base
