How to Group multiple columns and display the Count on the Kendogrid-Angular application

[Siva]

We are trying to Group multiple columns and display the Count on the Kendogrid-Angular application. Attached is the sample grid. Please help.

[Svet]

Hi Siva,

We can calculate the required group aggregates by using a proper GroupDescriptor:

public groups: GroupDescriptor[] = [{ field: 'Category.CategoryName', aggregates: [{aggregate: "count", field: 'Category.CategoryName'}]},{ field: 'UnitPrice', aggregates: [{aggregate: "count", field: "UnitPrice"}] }];

Once we have defined the group descriptors we can process the data so that the grid groups the data and calculates the aggregates:

private loadProducts(): void {
    this.gridView = process(products, { group: this.groups });
}

Finally we can use the kendoGridGroupHedearTemplate directive in order to display specific messages containing the aggregates in the group headers:

<ng-template kendoGridGroupHeaderTemplate let-value="value" let-aggregates="aggregates" let-field="field">
<strong>{{value + " Count"}}</strong>: {{aggregates[field].count}}
</ng-template>

Check the following example demonstrating this approach:

https://stackblitz.com/edit/kendo-grouped-grid-3-ptfrzu

I hope this helps.

Regards,
Svetlin
Progress Telerik