All Components

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 available templates in the MultiSelect.

Basic Usage

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

@Component({
  selector: 'my-app',
  template: `
    <div class="example-config">
      Current value: {{value | json}}
    </div>
    <div class="example-wrapper">
      <p>T-shirt size:</p>
      <kendo-multiselect
        kendoMultiSelectSummaryTag
        [data]="listItems"
        [(ngModel)]="value"
        [textField]="'text'"
        [valueField]="'value'"
      >
      </kendo-multiselect>
    </div>
  `
})
class AppComponent {
    public listItems: Array<{ text: string, value: number }> = [
        { text: "Small", value: 1 },
        { text: "Medium", value: 2 },
        { text: "Large", value: 3 }
    ];
    public value: any = [{ text: "Medium", value: 2 }];
}

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

@Component({
  selector: 'my-app',
  template: `
    <div class="example-config">
      Current value: {{value | json}}
    </div>
    <div class="example-wrapper">
      <p>T-shirt size:</p>
      <kendo-multiselect
        kendoMultiSelectSummaryTag
        [data]="listItems"
        [(ngModel)]="value"
        [textField]="'text'"
        [valueField]="'value'"
      >
      <ng-template kendoMultiSelectGroupTagTemplate let-dataItems>
        <span class="k-icon k-i-arrow-s"></span>
        {{ dataItems.length }} item(s) selected
      </ng-template>
      </kendo-multiselect>
    </div>
  `
})
class AppComponent {
    public listItems: Array<{ text: string, value: number }> = [
        { text: "Small", value: 1 },
        { text: "Medium", value: 2 },
        { text: "Large", value: 3 }
    ];
    public value: any = [{ text: "Medium", value: 2 }];
}

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".

@Component({
  selector: 'my-app',
  template: `
    <div class="example-config">
      Current value: {{value | json}}
    </div>
    <div class="example-wrapper">
      <p>T-shirt size:</p>
      <kendo-multiselect
        [kendoMultiSelectSummaryTag]="1"
        [data]="listItems"
        [(ngModel)]="value"
        [textField]="'text'"
        [valueField]="'value'"
      >
      <ng-template kendoMultiSelectGroupTagTemplate let-dataItems>
        {{ dataItems.length }} more selected
      </ng-template>
      </kendo-multiselect>
    </div>
  `
})
class AppComponent {
    public listItems: Array<{ text: string, value: number }> = [
        { text: "Small", value: 1 },
        { text: "Medium", value: 2 },
        { text: "Large", value: 3 }
    ];
    public value: any = [{ text: "Medium", value: 2 }];
}

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 Alphabetic Order

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

@Component({
  selector: 'my-app',
  template: `
    <div class="example-config">
      Current value: {{value | json}}
    </div>
    <div class="example-wrapper">
      <p>T-shirt size:</p>
      <kendo-multiselect
        [data]="listItems"
        [(ngModel)]="value"
        [textField]="'text'"
        [valueField]="'value'"
        [tagMapper]="tagMapper"
      >
      </kendo-multiselect>
    </div>
  `
})
class AppComponent {
    public listItems: Array<{ text: string, value: number }> = [
        { text: "Anne Davolio", value: 1 },
        { text: "Nancy King", value: 2 },
        { text: "Robert Fuller", value: 3 }
    ];
    public value: any = [{ text: "Medium", value: 2 }];
    public tagMapper(tags: any[]): any[] {
        return tags.sort((tag1: any, tag2: any): number => {
            return tag1['value'] - tag2['value'];
        });
    }
}

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.

@Component({
  selector: 'my-app',
  template: `
    <div class="example-config">
      Current value: {{value | json}}
    </div>
    <div class="example-wrapper">
      <p>T-shirt size:</p>
      <kendo-multiselect
        [data]="listItems"
        [(ngModel)]="value"
        [textField]="'text'"
        [valueField]="'value'"
        [tagMapper]="tagMapper"
      >
      </kendo-multiselect>
    </div>
  `
})
class AppComponent {
    public listItems: Array<{ text: string, value: number }> = [
        { text: "Small", value: 1 },
        { text: "Medium", value: 2 },
        { text: "Large", value: 3 }
    ];
    public value: any = [{ text: "Medium", value: 2 }];
    public tagMapper(tags: any[]): any[] {
        return tags.length < 3 ? tags : [ tags ];
    }
}

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.

@Component({
  selector: 'my-app',
  template: `
    <div class="example-config">
      Current value: {{value | json}}
    </div>
    <div class="example-wrapper">
      <p>T-shirt size:</p>
      <kendo-multiselect
        [data]="listItems"
        [(ngModel)]="value"
        [textField]="'text'"
        [valueField]="'value'"
        [tagMapper]="tagMapper"
        (removeTag)="removeTag($event)"
      >
      </kendo-multiselect>
    </div>
  `
})
class AppComponent {
    public listItems: Array<{ text: string, value: number }> = [
        { text: "Small", value: 1 },
        { text: "Medium", value: 2 },
        { text: "Large", value: 3 }
    ];
    public value: any = [{ text: "Medium", value: 2 }];
    public tagMapper(tags: any[]): any[] {
        return tags.length < 2 ? tags : [ tags ];
    }
    public removeTag(event: any): void {
        if (event.dataItem.length) {
            const sizes: string = event.dataItem.map((item) => item['text']).join(", ");
            if (!confirm("Are you sure you want to remove " + sizes)) {
                event.preventDefault();
            }
        }
    }
}
In this article