New to Kendo UI for Angular? Start a free 30-day trial

GroupFooterTemplateDirective

Represents the column group footer cell template of the Grid which helps to customize the group footer cell for the column. To define the group footer template, nest an <ng-template> tag with the kendoGridGroupFooterTemplate directive inside <kendo-grid-column>.

The template context is set to the current aggregates and the following additional fields are passed:

  • columnDefines an instance of the ColumnComponent option.
  • fieldThe current column field name.
  • groupThe current group data item.
  • aggregatesAll aggregate values for the current group.
import { process } from '@progress/kendo-data-query';

@Component({
    selector: 'my-app',
    template: `
        <kendo-grid [data]="gridData" [group]="groups">
            <kendo-grid-column field="ProductName">
                <ng-template kendoGridGroupFooterTemplate let-aggregates let-field="field">
                   Count: {{aggregates[field].count}}
                </ng-template>
            </kendo-grid-column>
        </kendo-grid>
    `
})

class AppComponent {
    public groups = [{ field: "ProductName", aggregates: [{ field: "ProductName", aggregate: "count" }] }];

    public gridData = process([{
        "ProductID": 1,
        "ProductName": "Chai",
        "UnitPrice": 18.0000,
        "Discontinued": false
      }, {
        "ProductID": 2,
        "ProductName": "Chang",
        "UnitPrice": 19.0000,
        "Discontinued": true
      }
    ], {
     group: this.groups
    });
}

Selector

[kendoGridGroupFooterTemplate]

In this article

Not finding the help you need?