GroupTemplateDirective

Renders the group header content. To define the group template, nest an <ng-template> tag with the kendo<ComponentName>GroupTemplate directive inside the component tag. The template context is set to the current component. To get a reference to the current data item, use the let-groupName directive.

• Using GroupTemplate with the AutoComplete
• Using GroupTemplate with the ComboBox
• Using GroupTemplate with the MultiColumnComboBox
• Using GroupTemplate with the DropDownList
• Using GroupTemplate with the MultiSelect

ts

import { groupBy } from '@progress/kendo-data-query';
@Component({
selector: 'my-app',
template: `
 <kendo-combobox [data]="groupedData" textField="name" valueField="name">
   <ng-template kendoComboBoxGroupTemplate let-groupName>
     <span>Food type: {{groupName}} option</span>
   </ng-template>
 </kendo-combobox>
`
})
class AppComponent {
  public data = [
      { name: "Pork", category: "Food", subcategory: "Meat" },
      { name: "Pepper", category: "Food", subcategory: "Vegetables" },
      { name: "Beef", category: "Food", subcategory: "Meat" }
  ];
  public groupedData = groupBy(this.data, [{field: "subcategory"}]);
}

Selector

[kendoDropDownListGroupTemplate],[kendoComboBoxGroupTemplate],[kendoMultiColumnComboBoxGroupTemplate],[kendoAutoCompleteGroupTemplate],[kendoMultiSelectGroupTemplate]