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

Angular TreeList Aggregates

The aggregates help you easily perform various mathematical operations with the level values of the respective column. Aggregates are commonly displayed inside the footer of the column.

You can enable the aggregates feature by using two methods:

Using the Data Binding Directives

When you use the built-in binding directives for flat and hierarchical data, the TreeList calculates the aggregates automatically for you.

Further details on how the data binding directives work under the hood are available in the data operations with the built-in directives documentation section.

Aggregating Flat Data

To calculate and visualize aggregates when using flat data:

  1. Provide the collection to the built-in kendoTreeListFlatBinding directive.

  2. Create an array of AggregateDescriptor objects that define aggregates for the required fields.

    public myAggregates: AggregateDescriptor[] = [
        { field: 'name', aggregate: 'count' }
        { field: 'hireDate', aggregate: 'max' },
    ];
  3. Set the aggregate property to the collection of AggregateDescriptor objects.

    <kendo-treelist 
        [kendoTreeListFlatBinding]="data" 
        [aggregate]="myAggregates" 
        ...
    >
        ...
    </kendo-treelist>
  4. Use the aggregates field passed by each template to access and display the predefined aggregates from step 2.

    <kendo-treelist-column field="name">
        <ng-template kendoTreeListFooterTemplate let-aggregates="aggregates">
            Count: {{ aggregates.name.count }}
        </ng-template>
    </kendo-treelist-column>

The following example demonstrates how to aggregate the data by the name and hireDate fields.

Example
View Source
Change Theme:

Aggregating Hierarchical Data

To calculate and visualize aggregates when using hierarchical data:

  1. Provide the collection to the built-in kendoTreeListHierarchyBinding directive.

  2. Create an array of AggregateDescriptor objects that define aggregates for the required fields.

    public myAggregates: AggregateDescriptor[] = [
        { field: 'name', aggregate: 'count' },
        { field: 'size', aggregate: 'max' },
    ];
  3. Set the aggregate property to the collection of AggregateDescriptor objects.

    <kendo-treelist 
        [kendoTreeListHierarchyBinding]="data" 
        [aggregate]="myAggregates" 
        ...
    >
        ...
    </kendo-treelist>
  4. Use the aggregates field passed by each template to access and display the predefined aggregates from step 2.

    <kendo-treelist-column field="name">
        <ng-template kendoTreeListFooterTemplate let-aggregates="aggregates">
            Count: {{ aggregates.name.count}}
        </ng-template>
    </kendo-treelist-column>

The following example demonstrates how to aggregate the data by the name and size fields.

Example
View Source
Change Theme:

Manual Aggregation

The manual aggregation gives the developer more control over the calculation of the data aggregates. Compared to the aggregation with the built-in directives, the manual approach provides greater transparency of the process because it requires to manually aggregate the TreeList data.

To manually calculate and visualize aggregates when using custom binding:

  1. Provide the collection to the built-in data property.

  2. Create an array of AggregateDescriptor objects that define aggregates for the required fields.

    public myAggregates: AggregateDescriptor[] = [
        { field: 'name', aggregate: 'count' },
        { field: 'hireDate', aggregate: 'max' },
    ];
  3. Implement a function that calculates the predefined aggregates by utilizing the built-in aggregateBy() method.

    private calculateAggregates(items: any): AggregateResult {
        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.myAggregates);
    }
  4. Use the function that calculates the aggregates to fetch the TreeList data.

        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),
            };
        }

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

Example
View Source
Change Theme:

Aggregate Types

The supported aggregate types are:

  • sum
  • average
  • count
  • min
  • max

The following example demonstrates how to calculate several aggregates and display them in the footer template.

Example
View Source
Change Theme: