Summary-Tag Mode
The MultiSelectTree enables you to customize the display of its selected tags.
To enable the summary-tag mode, apply the MultiSelectTreeSummaryTag directive. To implement more advanced scenarios, use the tagMapper callback function.
To customize the group tag, utilize the GroupTagTemplate directive.
While the
GroupTagTemplatedirective enables you customize the group tag, theTagTemplatedirective enables you to customize a single tag. For more information on customizing single tags, refer to the article on the available templates in the MultiSelectTree.
Basic Usage
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 GroupTagTemplate.
Grouping Tags Based on the Number of Selections
The MultiSelectTree 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 [kendoMultiSelectTreeSummaryTag] to "1".
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 MultiSelectTree 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 an alphabetical order
- Avoiding line breaks after a number of selections is made
Displaying the Selected Tags in Alphabetical Order
The following example demonstrates how to render the selected data items in an alphabetical order.
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.
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.