All Components

Templates

The MultiSelect provides templates which enable you to customize the content of its list items and the drop-down list elements.

Item Template

To customize the content of each list item, use the item template. To define an item template, nest a <ng-template> tag with an itemTemplate directive inside a <kendo-multiselect> tag.

The template context is set to the current MultiSelect component.

@Component({
  selector: 'my-app',
  styles: ['.template { display: inline-block; background: #333; color: #fff; border-radius: 50%; width: 18px; height: 18px; text-align: center; } '],
  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'"
      >
      <ng-template kendoMultiSelectItemTemplate let-dataItem>
        <span class="template">{{ dataItem.value }}</span> {{ dataItem.text }}
      </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 }];
}

Tag Template

To customize the element content that holds the selected text, use the tag template. To define a tag template, nest a <ng-template> tag with a tagTemplate directive inside a <kendo-multiselect> tag.

  • To render the selected items as a single summary tag, enable the single-tag mode through the GroupTagTemplate.
  • While the TagTemplate enables you customize a single tag, the GroupTagTemplate enables you to customize the selected items in the single-tag mode.

The template context is set to the current MultiSelect component.

@Component({
  selector: 'my-app',
  styles: ['.template { display: inline-block; background: #333; color: #fff; border-radius: 50%; width: 18px; height: 18px; text-align: center; } '],
  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'"
      >
      <ng-template kendoMultiSelectTagTemplate let-dataItem>
        <span class="template">{{ dataItem.value }}</span> {{ dataItem.text }}
      </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 }];
}

Header Template

To customize the header element of the drop-down list, use the header template. To define a header template, nest a <ng-template> tag with a headerTemplate directive inside a <kendo-multiselect> tag.

The template context is set to the current MultiSelect component.

@Component({
  selector: 'my-app',
  styles: ['h4 { font-size: 1em; font-weight: bold; padding: 0 8px; }'],
  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'"
      >
      <ng-template kendoMultiSelectHeaderTemplate let-dataItem>
        <h4>T-shirt sizes</h4>
      </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 = [];
}

To customize the footer element of the drop-down list, use the footer template. To define a footer template, nest a <ng-template> tag with a footerTemplate directive inside a <kendo-multiselect> tag.

The template context is set to the current MultiSelect component.

@Component({
  selector: 'my-app',
  styles: ['h4 { font-size: 1em; font-weight: bold; padding: 0 8px; }'],
  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'"
      >
      <ng-template kendoMultiSelectFooterTemplate let-dataItem>
        <h4>3 sizes available</h4>
      </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: "Large", value: 3 }];
}

No-Data Template

To customize the content of the drop-down list when no data is present, use the no-data template. To define a no-data template, nest a <ng-template> tag with a kendoMultiSelectNoDataTemplate directive inside a <kendo-multiselect> tag.

@Component({
  selector: 'my-app',
  styles: ['.k-i-warning { font-size: 2.5em; } h4 { font-size: 1em;}'],
  template: `
    <kendo-multiselect [data]="listItems">
       <ng-template kendoMultiSelectNoDataTemplate>
            <h4><span class="k-icon k-i-warning"></span><br /><br /> No data here</h4>
        </ng-template>
    </kendo-multiselect>
  `
})
class AppComponent {
    public listItems: Array<{ text: string, value: number }> = [];
}
In this article