All Components

Grouping with Aggregates

The Grid provides options for displaying grouped table data.

It also enables you to visualize the aggregates for the grouped data in the respective column group footers of the component.

To group the table data of the Grid, use its group and groupable options. To integrate the available aggregates in the respective template, use the GroupHeaderTemplateDirective, GroupFooterTemplateDirective, and FooterTemplateDirective directives.

import { Component } from '@angular/core';
import { process, GroupDescriptor, State, aggregateBy } from '@progress/kendo-data-query';

import {
    GridComponent,
    GridDataResult,
    DataStateChangeEvent
} from '@progress/kendo-angular-grid';

@Component({
    selector: 'my-app',
    template: `
<kendo-grid
        [data]="gridData"
        [pageSize]="state.take"
        [skip]="state.skip"
        [sort]="state.sort"
        [group]="state.group"
        [sortable]="{ mode: 'multiple' }"
        [height]="300"
        [pageable]="true"
        [groupable]="{ showFooter: true }"
        (dataStateChange)="dataStateChange($event)"
    >
    <kendo-grid-column field="ProductID" title="Product ID" width="120">
        <template kendoGridGroupHeaderTemplatŠµ>
        </template>
    </kendo-grid-column>
    <kendo-grid-column field="ProductName" title="Product Name">
    </kendo-grid-column>
    <kendo-grid-column field="UnitPrice" title="Unit Price" width="230">
        <template 
            kendoGridGroupFooterTemplate 
                let-group="group" 
                let-aggregates>Sum: {{aggregates["UnitPrice"].sum}}</template>
        <template 
            kendoGridFooterTemplate 
                let-column="column">Total {{column.title}}: {{total["UnitPrice"].sum}}</template>
    </kendo-grid-column>
    <kendo-grid-column field="Discontinued" width="120">
        <template kendoGridCellTemplate let-dataItem>
            <input type="checkbox" [checked]="dataItem.Discontinued" disabled/>
        </template>
    </kendo-grid-column>
    </kendo-grid>
`
})
export class AppComponent {
    private aggregates: any[] = [{field: 'UnitPrice', aggregate: 'sum'}];

    private state: State = {
        skip: 0,
        take: 5,
        group: [{ field: 'UnitPrice', aggregates: this.aggregates }]
    };

    private data = [{
        "ProductID": 1,
        "ProductName": "Chai",
        "UnitPrice": 18.0000,
        "Discontinued": true
    }, {
        "ProductID": 2,
        "ProductName": "Chang",
        "UnitPrice": 19.0000,
        "Discontinued": false
    }, {
        "ProductID": 3,
        "ProductName": "Aniseed Syrup",
        "UnitPrice": 10.0000,
        "Discontinued": false
    }, {
        "ProductID": 4,
        "ProductName": "Chef Anton's Cajun Seasoning",
        "UnitPrice": 22.0000,
        "Discontinued": false
    }, {
        "ProductID": 5,
        "ProductName": "Chef Anton's Gumbo Mix",
        "UnitPrice": 21.3500,
        "Discontinued": false
    }, {
        "ProductID": 6,
        "ProductName": "Grandma's Boysenberry Spread",
        "UnitPrice": 25.0000,
        "Discontinued": false
    }, {
        "ProductID": 7,
        "ProductName": "Chai",
        "UnitPrice": 22.0000,
        "Discontinued": true
    }];

    private gridData: any = process(this.data, this.state);
    private total: any = aggregateBy(this.data, this.aggregates);

    protected dataStateChange(state: DataStateChangeEvent): void {
        state.group.map(
            group => group.aggregates = this.aggregates);

        this.state = state;

        this.gridData = process(this.data, this.state);
    }
}
import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from '@angular/http';

import { GridModule } from '@progress/kendo-angular-grid';

import { AppComponent }   from './app.component';

@NgModule({
  bootstrap: [
    AppComponent
  ],
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpModule,
    GridModule
  ]
})
export class AppModule { }

import { AppModule } from './ng.module';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

In this article