Grouping
The DropDownList provides options for displaying grouped data.
To enable grouping, utilize the GroupResult collections from the Data Query package which do not require additional setup.
import { GroupResult, groupBy } from '@progress/kendo-data-query';
@Component({
selector: 'my-app',
template: `
<div class="example-wrapper">
<kendo-dropdownlist
[data]="groupedData"
[textField]="'name'"
[valueField]="'name'">
</kendo-dropdownlist>
</div>
`
})
class AppComponent {
public data: Array<any> = [
{ name: "Pork", category: "Food", subcategory: "Meat" },
{ name: "Pepper", category: "Food", subcategory: "Vegetables" },
{ name: "Beef", category: "Food", subcategory: "Meat" }
];
public groupedData: GroupResult[] = groupBy(this.data, [{field: "subcategory"}]);
}