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:

• The Data Binding Directives—Allow you to visualize aggregates (or other data operations) with less code.
• Manual Aggregation—Provides more control when implementing the aggregates feature.

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.

   ts

   public myAggregates: AggregateDescriptor[] = [
       { field: 'name', aggregate: 'count' }
       { field: 'hireDate', aggregate: 'max' },
   ];

3. Set the aggregate property to the collection of AggregateDescriptor objects.

   html

   <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.

   html

   <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.

Change Theme

Theme

Loading ...

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.

   ts

   public myAggregates: AggregateDescriptor[] = [
       { field: 'name', aggregate: 'count' },
       { field: 'size', aggregate: 'max' },
   ];

3. Set the aggregate property to the collection of AggregateDescriptor objects.

   html

   <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.

   html

   <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.

Change Theme

Theme

Loading ...

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.

   ts

   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.

   ts

   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.

   ts

       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.

Change Theme

Theme

Loading ...

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.

Change Theme

Theme

Loading ...

Suggested Links

• Overview of Data Query
• API Reference of the TreeList Component
• API Index of the TreeList