All Components

Templates

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

Item Template

To customize the content of the list items, use the item template.

Defining the Template

To define an item template, nest an <ng-template> tag with the kendoMultiSelectItemTemplate 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 }];
}

Rendering Item Checkboxes

The MultiSelect enables you to render checkboxes for its items by using the item template.

@Component({
  selector: 'my-app',
  template: `
    <div class="example-wrapper">
      <kendo-multiselect
        [data]="listItems"
        [(ngModel)]="value"
        [textField]="'text'"
        [valueField]="'value'"
        [autoClose]="false"
      >
      <ng-template kendoMultiSelectItemTemplate let-dataItem>
        <input type="checkbox" class="k-checkbox"
          [checked]="isItemSelected(dataItem.text)">
        <label class="k-checkbox-label">{{ dataItem.text }}</label>
      </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 },
        { text: "XL", value: 4 },
        { text: "XXL", value: 5 }
    ];        
    public value: any = [{ text: "Medium", value: 2 }];

    public isItemSelected(itemText: string): boolean {
        return this.value.some(item => item.text === itemText);
    }
}

Custom Item Template

To configure the content of the custom value item in the list, use the custom item template. To define a custom item template, nest an <ng-template> tag with an kendoMultiSelectCustomItemTemplate directive inside a <kendo-multiselect> tag.

The template context is set to the current text of the MultiSelect.

@Component({
  selector: 'my-app',
  template: `
    <p>Custom values are <strong>enabled</strong>. Type a custom value.</p>

    <p>primitive data</p>
    <div class="example-wrapper">
        <kendo-multiselect
            [data]="sizes"
            [value]="selectedSizes"
            [allowCustom]="true"
            (valueChange)="onSizeChange($event)"
        >
        <ng-template kendoMultiSelectCustomItemTemplate let-customText>
            <strong>{{ customText }}</strong>
        </ng-template>
        </kendo-multiselect>
    </div>
  `
})
class AppComponent {
    public sizes: Array<string> = [ "Small", "Medium", "Large" ];
    public selectedSizes: Array<string> = [];

    public onSizeChange(value) {
        this.selectedSizes = value;
    }
}

Tag Template

To customize the content of the element that holds the selected text, use the tag template. To define a tag template, nest an <ng-template> tag with a kendoMultiSelectTagTemplate 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 an <ng-template> tag with a kendoMultiSelectHeaderTemplate 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 an <ng-template> tag with a kendoMultiSelectFooterTemplate 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 available, use the no-data template. To define a no-data template, nest an <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