Aggregates

The TreeList enables you to visualize the aggregates for the level items in the respective column footer.

To provide the aggregates either use the binding directives aggregate option or return an object with data and aggregates fields from the fetchChildren callback.

The following example demonstrates how to display the aggregate values in the footer with the binding directives.

import { Component } from '@angular/core';
import { Employee, employees } from './employees';

@Component({
    selector: 'my-app',
    template: `
        <kendo-treelist [kendoTreeListFlatBinding]="data" idField="id" parentIdField="managerId"
                kendoTreeListExpandable
                [aggregate]="aggregate"
                [navigable]="true"
                [height]="410">
            <kendo-treelist-column [expandable]="true" field="name" title="Name" [width]="250">
                <ng-template kendoTreeListFooterTemplate let-aggregates="aggregates">
                  {{ aggregates.name.count }} employee(s)
                </ng-template>
            </kendo-treelist-column>
            <kendo-treelist-column field="title" title="Title" [width]="180"></kendo-treelist-column>
            <kendo-treelist-column field="hireDate" title="hireDate" format="d" [width]="180">
                <ng-template kendoTreeListFooterTemplate let-aggregates="aggregates">
                  Last employee hired on {{ aggregates.hireDate.max | kendoDate : 'd' }}
                </ng-template>
            </kendo-treelist-column>
        </kendo-treelist>
    `
})
export class AppComponent {
    public aggregate: any[] = [{ field: 'name', aggregate: 'count' }, { field: 'hireDate', aggregate: 'max' }];

    public data: Employee[] = employees;
}
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { TreeListModule } from '@progress/kendo-angular-treelist';
import { IntlModule } from '@progress/kendo-angular-intl';
import { AppComponent } from './app.component';

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        FormsModule,
        TreeListModule,
        IntlModule
    ],
    declarations: [
        AppComponent
    ],
    bootstrap: [
        AppComponent
    ]
})

export class AppModule { }
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

enableProdMode();

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

export interface Employee {
    id: number;
    managerId?: number;
    name: string;
    title: string;
    phone: string;
    hireDate?: Date;
}

export const employees: Employee[] = [
    {
        id: 1,
        name: 'Daryl Sweeney',
        title: 'Chief Executive Officer',
        phone: '(555) 924-9726',
        managerId: null,
        hireDate: new Date('2019-01-15')
    },
    {
        id: 2,
        name: 'Guy Wooten',
        title: 'Chief Technical Officer',
        phone: '(438) 738-4935',
        managerId: 1,
        hireDate: new Date('2019-02-19')
    },
    {
        id: 32,
        name: 'Buffy Weber',
        title: 'VP, Engineering',
        phone: '(699) 838-6121',
        managerId: 2,
        hireDate: new Date('2019-04-13')
    },
    {
        id: 11,
        name: 'Hyacinth Hood',
        title: 'Team Lead',
        phone: '(889) 345-2438',
        managerId: 32,
        hireDate: new Date('2018-01-17')
    },
    {
        id: 60,
        name: 'Akeem Carr',
        title: 'Junior Software Developer',
        phone: '(738) 136-2814',
        managerId: 11,
        hireDate: new Date('2018-01-18')
    },
    {
        id: 78,
        name: 'Rinah Simon',
        title: 'Software Developer',
        phone: '(285) 912-5271',
        managerId: 11,
        hireDate: new Date('2018-03-17')
    },
    {
        id: 42,
        name: 'Gage Daniels',
        title: 'Software Architect',
        phone: '(107) 290-6260',
        managerId: 32,
        hireDate: new Date('2019-03-14')
    },
    {
        id: 43,
        name: 'Constance Vazquez',
        title: 'Director, Engineering',
        phone: '(800) 301-1978',
        managerId: 32,
        hireDate: new Date('2018-03-18')
    },
    {
        id: 46,
        name: 'Darrel Solis',
        title: 'Team Lead',
        phone: '(327) 977-0216',
        managerId: 43,
        hireDate: new Date('2019-04-15')
    },
    {
        id: 47,
        name: 'Brian Yang',
        title: 'Senior Software Developer',
        phone: '(565) 146-5435',
        managerId: 46,
        hireDate: new Date('2019-02-21')
    },
    {
        id: 50,
        name: 'Lillian Bradshaw',
        title: 'Software Developer',
        phone: '(323) 509-3479',
        managerId: 46,
        hireDate: new Date('2019-05-23')
    },
    {
        id: 51,
        name: 'Christian Palmer',
        title: 'Technical Lead',
        phone: '(490) 421-8718',
        managerId: 46,
        hireDate: new Date('2019-04-16')
    },
    {
        id: 55,
        name: 'Summer Mosley',
        title: 'QA Engineer',
        phone: '(784) 962-2301',
        managerId: 46,
        hireDate: new Date('2019-09-21')
    },
    {
        id: 56,
        name: 'Barry Ayers',
        title: 'Software Developer',
        phone: '(452) 373-9227',
        managerId: 46,
        hireDate: new Date('2018-04-16')
    },
    {
        id: 59,
        name: 'Keiko Espinoza',
        title: 'Junior QA Engineer',
        phone: '(226) 600-5305',
        managerId: 46,
        hireDate: new Date('2018-01-22')
    },
    {
        id: 61,
        name: 'Candace Pickett',
        title: 'Support Officer',
        phone: '(120) 117-7475',
        managerId: 46,
        hireDate: new Date('2018-09-18')
    },
    {
        id: 63,
        name: 'Mia Caldwell',
        title: 'Team Lead',
        phone: '(848) 636-6470',
        managerId: 43,
        hireDate: new Date('2018-07-17')
    },
    {
        id: 65,
        name: 'Thomas Terry',
        title: 'Senior Enterprise Support Officer',
        phone: '(764) 831-4248',
        managerId: 63,
        hireDate: new Date('2018-07-14')
    },
    {
        id: 67,
        name: 'Ruth Downs',
        title: 'Senior Software Developer',
        phone: '(138) 991-1440',
        managerId: 63,
        hireDate: new Date('2018-08-14')
    },
    {
        id: 70,
        name: 'Yasir Wilder',
        title: 'Senior QA Engineer',
        phone: '(759) 701-8665',
        managerId: 63,
        hireDate: new Date('2019-08-17')
    },
    {
        id: 71,
        name: 'Flavia Short',
        title: 'Support Officer',
        phone: '(370) 133-9238',
        managerId: 63,
        hireDate: new Date('2018-06-15')
    },
    {
        id: 74,
        name: 'Aaron Roach',
        title: 'Junior Software Developer',
        phone: '(958) 717-9230',
        managerId: 63,
        hireDate: new Date('2018-09-18')
    },
    {
        id: 75,
        name: 'Eric Russell',
        title: 'Software Developer',
        phone: '(516) 575-8505',
        managerId: 63,
        hireDate: new Date('2019-09-13')
    },
    {
        id: 76,
        name: 'Cheyenne Olson',
        title: 'Software Developer',
        phone: '(241) 645-0257',
        managerId: 63,
        hireDate: new Date('2018-09-18')
    },
    {
        id: 77,
        name: 'Shaine Avila',
        title: 'UI Designer',
        phone: '(844) 435-1360',
        managerId: 63,
        hireDate: new Date('2018-01-22')
    },
    {
        id: 81,
        name: 'Chantale Long',
        title: 'Senior QA Engineer',
        phone: '(252) 419-6891',
        managerId: 63,
        hireDate: new Date('2018-09-14')
    },
    {
        id: 83,
        name: 'Dane Cruz',
        title: 'Junior Software Developer',
        phone: '(946) 701-6165',
        managerId: 63,
        hireDate: new Date('2019-03-15')
    },
    {
        id: 84,
        name: 'Regan Patterson',
        title: 'Technical Writer',
        phone: '(265) 946-1765',
        managerId: 63,
        hireDate: new Date('2019-05-17')
    },
    {
        id: 85,
        name: 'Drew Mckay',
        title: 'Senior Software Developer',
        phone: '(327) 293-0162',
        managerId: 63,
        hireDate: new Date('2019-05-21')
    },
    {
        id: 88,
        name: 'Bevis Miller',
        title: 'Senior Software Developer',
        phone: '(525) 557-0169',
        managerId: 63,
        hireDate: new Date('2018-08-15')
    },
    {
        id: 89,
        name: 'Bruce Mccarty',
        title: 'Support Officer',
        phone: '(936) 777-8730',
        managerId: 63,
        hireDate: new Date('2019-10-21')
    },
    {
        id: 90,
        name: 'Ocean Blair',
        title: 'Team Lead',
        phone: '(343) 586-6614',
        managerId: 43,
        hireDate: new Date('2018-06-20')
    },
    {
        id: 91,
        name: 'Guinevere Osborn',
        title: 'Software Developer',
        phone: '(424) 741-0006',
        managerId: 90,
        hireDate: new Date('2019-06-17')
    },
    {
        id: 92,
        name: 'Olga Strong',
        title: 'Graphic Designer',
        phone: '(949) 417-1168',
        managerId: 90,
        hireDate: new Date('2018-06-15')
    },
    {
        id: 93,
        name: 'Robert Orr',
        title: 'Support Officer',
        phone: '(977) 341-3721',
        managerId: 90,
        hireDate: new Date('2018-06-22')
    },
    {
        id: 95,
        name: 'Odette Sears',
        title: 'Senior Software Developer',
        phone: '(264) 818-6576',
        managerId: 90,
        hireDate: new Date('2019-05-20')
    },
    {
        id: 45,
        name: 'Zelda Medina',
        title: 'QA Architect',
        phone: '(563) 359-6023',
        managerId: 32,
        hireDate: new Date('2018-08-16')
    },
    {
        id: 3,
        name: 'Priscilla Frank',
        title: 'Chief Product Officer',
        phone: '(217) 280-5300',
        managerId: 1,
        hireDate: new Date('2019-04-22')
    },
    {
        id: 4,
        name: 'Ursula Holmes',
        title: 'EVP, Product Strategy',
        phone: '(370) 983-8796',
        managerId: 3,
        hireDate: new Date('2018-01-15')
    },
    {
        id: 24,
        name: 'Melvin Carrillo',
        title: 'Director, Developer Relations',
        phone: '(344) 496-9555',
        managerId: 3,
        hireDate: new Date('2018-01-17')
    },
    {
        id: 29,
        name: 'Martha Chavez',
        title: 'Developer Advocate',
        phone: '(140) 772-7509',
        managerId: 24,
        hireDate: new Date('2018-05-14')
    },
    {
        id: 30,
        name: 'Oren Fox',
        title: 'Developer Advocate',
        phone: '(714) 284-2408',
        managerId: 24,
        hireDate: new Date('2018-07-19')
    },
    {
        id: 41,
        name: 'Amos Barr',
        title: 'Developer Advocate',
        phone: '(996) 587-8405',
        managerId: 24,
        hireDate: new Date('2019-01-16')
    }
  ];

The following example demonstrates how to display the aggregate values in the footer with custom binding.

import { Component } from '@angular/core';
import { employees } from './employees';

import { aggregateBy } from '@progress/kendo-data-query';

@Component({
    selector: 'my-app',
    template: `
        <kendo-treelist [data]="data"
                kendoTreeListExpandable
                [fetchChildren]="fetchChildren"
                [hasChildren]="hasChildren"
                [height]="410">
            <kendo-treelist-column [expandable]="true" field="name" title="Name" [width]="250">
                <ng-template kendoTreeListFooterTemplate let-aggregates="aggregates">
                  {{ aggregates.name.count }} employee(s)
                </ng-template>
            </kendo-treelist-column>
            <kendo-treelist-column field="title" title="Title" [width]="180"></kendo-treelist-column>
            <kendo-treelist-column field="hireDate" title="hireDate" format="d" [width]="180">
                <ng-template kendoTreeListFooterTemplate let-aggregates="aggregates">
                  Last employee hired on {{ aggregates.hireDate.max | kendoDate : 'd' }}
                </ng-template>
            </kendo-treelist-column>
        </kendo-treelist>
    `
})
export class AppComponent {
    public aggregate: any[] = [{ field: 'name', aggregate: 'count' }, { field: 'hireDate', aggregate: 'max' }];

    public data: any;

    constructor() {
        this.fetchChildren = this.fetchChildren.bind(this);

        this.data = this.fetchChildren();
    }

    public fetchChildren(item?: any): any {
        const id = item ? item.id : null;
        const children = employees.filter(e => e.managerId === id);

        return {
            data: children,
            aggregates: this.calculateAggregates(children)
        };
    }

    public hasChildren(item: any): boolean {
        return employees.some(e => e.managerId === item.id);
    }

    private calculateAggregates(items: any): void {
        const all = [];

        items = items.slice(0);

        while (items.length) {
            const current = items.shift();
            all.push(current);

            items = items.concat(employees.filter(e => e.managerId === current.id));
        }

        return aggregateBy(all, this.aggregate);
    }
}
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { TreeListModule } from '@progress/kendo-angular-treelist';
import { IntlModule } from '@progress/kendo-angular-intl';
import { AppComponent } from './app.component';

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        FormsModule,
        TreeListModule,
        IntlModule
    ],
    declarations: [
        AppComponent
    ],
    bootstrap: [
        AppComponent
    ]
})

export class AppModule { }
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

enableProdMode();

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

export interface Employee {
    id: number;
    managerId?: number;
    name: string;
    title: string;
    phone: string;
    hireDate?: Date;
}

export const employees: Employee[] = [
    {
        id: 1,
        name: 'Daryl Sweeney',
        title: 'Chief Executive Officer',
        phone: '(555) 924-9726',
        managerId: null,
        hireDate: new Date('2019-01-15')
    },
    {
        id: 2,
        name: 'Guy Wooten',
        title: 'Chief Technical Officer',
        phone: '(438) 738-4935',
        managerId: 1,
        hireDate: new Date('2019-02-19')
    },
    {
        id: 32,
        name: 'Buffy Weber',
        title: 'VP, Engineering',
        phone: '(699) 838-6121',
        managerId: 2,
        hireDate: new Date('2019-04-13')
    },
    {
        id: 11,
        name: 'Hyacinth Hood',
        title: 'Team Lead',
        phone: '(889) 345-2438',
        managerId: 32,
        hireDate: new Date('2018-01-17')
    },
    {
        id: 60,
        name: 'Akeem Carr',
        title: 'Junior Software Developer',
        phone: '(738) 136-2814',
        managerId: 11,
        hireDate: new Date('2018-01-18')
    },
    {
        id: 78,
        name: 'Rinah Simon',
        title: 'Software Developer',
        phone: '(285) 912-5271',
        managerId: 11,
        hireDate: new Date('2018-03-17')
    },
    {
        id: 42,
        name: 'Gage Daniels',
        title: 'Software Architect',
        phone: '(107) 290-6260',
        managerId: 32,
        hireDate: new Date('2019-03-14')
    },
    {
        id: 43,
        name: 'Constance Vazquez',
        title: 'Director, Engineering',
        phone: '(800) 301-1978',
        managerId: 32,
        hireDate: new Date('2018-03-18')
    },
    {
        id: 46,
        name: 'Darrel Solis',
        title: 'Team Lead',
        phone: '(327) 977-0216',
        managerId: 43,
        hireDate: new Date('2019-04-15')
    },
    {
        id: 47,
        name: 'Brian Yang',
        title: 'Senior Software Developer',
        phone: '(565) 146-5435',
        managerId: 46,
        hireDate: new Date('2019-02-21')
    },
    {
        id: 50,
        name: 'Lillian Bradshaw',
        title: 'Software Developer',
        phone: '(323) 509-3479',
        managerId: 46,
        hireDate: new Date('2019-05-23')
    },
    {
        id: 51,
        name: 'Christian Palmer',
        title: 'Technical Lead',
        phone: '(490) 421-8718',
        managerId: 46,
        hireDate: new Date('2019-04-16')
    },
    {
        id: 55,
        name: 'Summer Mosley',
        title: 'QA Engineer',
        phone: '(784) 962-2301',
        managerId: 46,
        hireDate: new Date('2019-09-21')
    },
    {
        id: 56,
        name: 'Barry Ayers',
        title: 'Software Developer',
        phone: '(452) 373-9227',
        managerId: 46,
        hireDate: new Date('2018-04-16')
    },
    {
        id: 59,
        name: 'Keiko Espinoza',
        title: 'Junior QA Engineer',
        phone: '(226) 600-5305',
        managerId: 46,
        hireDate: new Date('2018-01-22')
    },
    {
        id: 61,
        name: 'Candace Pickett',
        title: 'Support Officer',
        phone: '(120) 117-7475',
        managerId: 46,
        hireDate: new Date('2018-09-18')
    },
    {
        id: 63,
        name: 'Mia Caldwell',
        title: 'Team Lead',
        phone: '(848) 636-6470',
        managerId: 43,
        hireDate: new Date('2018-07-17')
    },
    {
        id: 65,
        name: 'Thomas Terry',
        title: 'Senior Enterprise Support Officer',
        phone: '(764) 831-4248',
        managerId: 63,
        hireDate: new Date('2018-07-14')
    },
    {
        id: 67,
        name: 'Ruth Downs',
        title: 'Senior Software Developer',
        phone: '(138) 991-1440',
        managerId: 63,
        hireDate: new Date('2018-08-14')
    },
    {
        id: 70,
        name: 'Yasir Wilder',
        title: 'Senior QA Engineer',
        phone: '(759) 701-8665',
        managerId: 63,
        hireDate: new Date('2019-08-17')
    },
    {
        id: 71,
        name: 'Flavia Short',
        title: 'Support Officer',
        phone: '(370) 133-9238',
        managerId: 63,
        hireDate: new Date('2018-06-15')
    },
    {
        id: 74,
        name: 'Aaron Roach',
        title: 'Junior Software Developer',
        phone: '(958) 717-9230',
        managerId: 63,
        hireDate: new Date('2018-09-18')
    },
    {
        id: 75,
        name: 'Eric Russell',
        title: 'Software Developer',
        phone: '(516) 575-8505',
        managerId: 63,
        hireDate: new Date('2019-09-13')
    },
    {
        id: 76,
        name: 'Cheyenne Olson',
        title: 'Software Developer',
        phone: '(241) 645-0257',
        managerId: 63,
        hireDate: new Date('2018-09-18')
    },
    {
        id: 77,
        name: 'Shaine Avila',
        title: 'UI Designer',
        phone: '(844) 435-1360',
        managerId: 63,
        hireDate: new Date('2018-01-22')
    },
    {
        id: 81,
        name: 'Chantale Long',
        title: 'Senior QA Engineer',
        phone: '(252) 419-6891',
        managerId: 63,
        hireDate: new Date('2018-09-14')
    },
    {
        id: 83,
        name: 'Dane Cruz',
        title: 'Junior Software Developer',
        phone: '(946) 701-6165',
        managerId: 63,
        hireDate: new Date('2019-03-15')
    },
    {
        id: 84,
        name: 'Regan Patterson',
        title: 'Technical Writer',
        phone: '(265) 946-1765',
        managerId: 63,
        hireDate: new Date('2019-05-17')
    },
    {
        id: 85,
        name: 'Drew Mckay',
        title: 'Senior Software Developer',
        phone: '(327) 293-0162',
        managerId: 63,
        hireDate: new Date('2019-05-21')
    },
    {
        id: 88,
        name: 'Bevis Miller',
        title: 'Senior Software Developer',
        phone: '(525) 557-0169',
        managerId: 63,
        hireDate: new Date('2018-08-15')
    },
    {
        id: 89,
        name: 'Bruce Mccarty',
        title: 'Support Officer',
        phone: '(936) 777-8730',
        managerId: 63,
        hireDate: new Date('2019-10-21')
    },
    {
        id: 90,
        name: 'Ocean Blair',
        title: 'Team Lead',
        phone: '(343) 586-6614',
        managerId: 43,
        hireDate: new Date('2018-06-20')
    },
    {
        id: 91,
        name: 'Guinevere Osborn',
        title: 'Software Developer',
        phone: '(424) 741-0006',
        managerId: 90,
        hireDate: new Date('2019-06-17')
    },
    {
        id: 92,
        name: 'Olga Strong',
        title: 'Graphic Designer',
        phone: '(949) 417-1168',
        managerId: 90,
        hireDate: new Date('2018-06-15')
    },
    {
        id: 93,
        name: 'Robert Orr',
        title: 'Support Officer',
        phone: '(977) 341-3721',
        managerId: 90,
        hireDate: new Date('2018-06-22')
    },
    {
        id: 95,
        name: 'Odette Sears',
        title: 'Senior Software Developer',
        phone: '(264) 818-6576',
        managerId: 90,
        hireDate: new Date('2019-05-20')
    },
    {
        id: 45,
        name: 'Zelda Medina',
        title: 'QA Architect',
        phone: '(563) 359-6023',
        managerId: 32,
        hireDate: new Date('2018-08-16')
    },
    {
        id: 3,
        name: 'Priscilla Frank',
        title: 'Chief Product Officer',
        phone: '(217) 280-5300',
        managerId: 1,
        hireDate: new Date('2019-04-22')
    },
    {
        id: 4,
        name: 'Ursula Holmes',
        title: 'EVP, Product Strategy',
        phone: '(370) 983-8796',
        managerId: 3,
        hireDate: new Date('2018-01-15')
    },
    {
        id: 24,
        name: 'Melvin Carrillo',
        title: 'Director, Developer Relations',
        phone: '(344) 496-9555',
        managerId: 3,
        hireDate: new Date('2018-01-17')
    },
    {
        id: 29,
        name: 'Martha Chavez',
        title: 'Developer Advocate',
        phone: '(140) 772-7509',
        managerId: 24,
        hireDate: new Date('2018-05-14')
    },
    {
        id: 30,
        name: 'Oren Fox',
        title: 'Developer Advocate',
        phone: '(714) 284-2408',
        managerId: 24,
        hireDate: new Date('2018-07-19')
    },
    {
        id: 41,
        name: 'Amos Barr',
        title: 'Developer Advocate',
        phone: '(996) 587-8405',
        managerId: 24,
        hireDate: new Date('2019-01-16')
    }
  ];

In this article