New to Kendo UI for Angular? Start a free 30-day trial
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 AutoCompleteUsing GroupTemplate with the ComboBoxUsing GroupTemplate with the MultiColumnComboBoxUsing GroupTemplate with the DropDownListUsing GroupTemplate with the MultiSelect
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]
