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

1 Answer 556 Views
General Discussions
Top achievements
Rank 1
Siva asked on 09 May 2018, 10:24 PM
We are trying to Group multiple columns and display the Count on the Kendogrid-Angular application. Attached is the sample grid. Please help.

1 Answer, 1 is accepted

Sort by
Telerik team
answered on 11 May 2018, 10:52 AM
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}}

Check the following example demonstrating this approach:

I hope this helps.

Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
General Discussions
Asked by
Top achievements
Rank 1
Answers by
Telerik team
Share this question