New to Kendo UI for Angular? Start a free 30-day trial

Summary-Tag Mode

The MultiSelect enables you to customize the display of the selected tags.

To enable the summary-tag mode, apply the SummaryTag directive. To implement more advanced scenarios, use the tagMapper callback function.

To customize the group tag, utilize the GroupTagTemplate directive.

While the GroupTagTemplate directive enables you customize the group tag, the TagTemplate directive enables you to customize a single tag. For more information on customizing single tags, refer to the article on the templates supported by the MultiSelect.

Basic Usage

The following example demonstrates how to display a single summary tag.

Example
View Source
Change Theme:

The following example demonstrates how to customize the single summary tag by applying the GroupTagTemplate.

Example
View Source
Change Theme:

Grouping Tags Based on the Number of Selections

The MultiSelect allows you to enable the summary-tag mode only after a given number of selections is made.

The following example demonstrates how to display the first selected item and group the next selections in a summary tag by setting [kendoMultiSelectSummaryTag] to "1".

Example
View Source
Change Theme:

Rendering of Tags

The tagMapper callback function receives the array of selected data items and maps them to an array of tags. To create a group tag, place the desired data items in an array—for example, if the selected data items are [1,2,3,4] and you create a group tag for 3 and 4, the tagMapper will return [1,2,[3,4]] where the data items 3 and 4 are treated as a single, though group, tag.

If a selected data item is missing from the returned tag array, the MultiSelect will not render a tag for that item, but that item will still be treated as selected. To remove it, the user has to manually deselect it from the list.

The following implementations represent possible scenarios for the application of the tagMapper:

Displaying the Selected Tags in Alphabetical Order

The following example demonstrates how to render the selected data items in an alphabetical order.

Example
View Source
Change Theme:

Avoiding Line Breaks after a Number of Selections

The tagMapper allows you to display all selected items in a group tag after a specific number of items is selected.

Example
View Source
Change Theme:

Notifying on Removing Group Tags

You can use the RemoveTag event to notify the user which of the selected data items within the group tag will be removed.

The following example demonstrates how to display a confirmation dialog when the user clicks the X button of the group tag. If the confirmation dialog is cancelled, the RemoveTag event will be prevented and the group tag will not be removed. To remove only some of the items and not the whole group tag, the user has to manually deselect these items from the list.

Example
View Source
Change Theme: