The MultiSelect enables you to customize the display of the selected tags.
To enable the summary-tag mode, apply the
tagMapper callback function.
To customize the group tag, utilize the
GroupTagTemplatedirective enables you customize the group tag, the
TagTemplatedirective enables you to customize a single tag. For more information on customizing single tags, refer to the article on the available templates in the MultiSelect.
The following example demonstrates how to display a single summary tag.
The following example demonstrates how to customize the single summary tag by applying the
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
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
tagMapper will return
[1,2,[3,4]] where the data items
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
- Displaying the selected tags in an alphabetical order
- Avoiding line breaks after a number of selections is made
The following example demonstrates how to render the selected data items in an alphabetical order.
tagMapper allows you to display all selected items in a group tag after a specific number of items is selected.
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.