Angular TreeList Aggregates
The aggregates help you easily perform various mathematical operations with the column values at each level of the hierarchy. Aggregates are commonly displayed inside the footer of the column.
You can enable the aggregates feature by using two methods:
- Automatic Data Processing—Uses the built-in binding directives to calculate aggregates automatically with less code.
- Manual Aggregation—Provides more control when implementing the aggregates feature.
Automatic Data Processing
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.
To calculate and visualize aggregates:
-
Provide the collection to the built-in
kendoTreeListFlatBindingorkendoTreeListHierarchyBindingdirective depending on your data type. -
Create an array of
AggregateDescriptorobjects that define aggregates for the required fields.tspublic myAggregates: AggregateDescriptor[] = [ { field: 'name', aggregate: 'count' }, { field: 'yearsExperience', aggregate: 'max' }, ]; -
Set the
aggregateproperty to the collection ofAggregateDescriptorobjects.html<kendo-treelist [kendoTreeListFlatBinding]="data" [aggregate]="myAggregates" ... > ... </kendo-treelist> -
Use the
aggregatesfield 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 yearsExperience fields.
Manual Aggregation
The manual aggregation gives the developer more control over the calculation of the data aggregates. Compared to the automatic data processing, 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:
-
Provide the collection to the built-in
dataproperty. -
Create an array of
AggregateDescriptorobjects that define aggregates for the required fields.tspublic myAggregates: AggregateDescriptor[] = [ { field: 'name', aggregate: 'count' }, { field: 'yearsExperience', aggregate: 'max' }, ]; -
Implement a function that calculates the predefined aggregates by utilizing the built-in
aggregateBy()method.tsprivate calculateAggregates(items: MedicalNode[]): AggregateResult { const all: MedicalNode[] = []; let queue = [...items]; while (queue.length) { const current = queue.shift()!; all.push(current); queue = queue.concat(medicalStaff.filter(n => n.parentId === current.id)); } return aggregateBy(all, this.myAggregates); } -
Use the function that calculates the aggregates to fetch the TreeList data.
tspublic fetchChildren = (item?: MedicalNode): any => { const parentId = item ? item.id : null; const children = medicalStaff.filter(n => n.parentId === parentId); return { data: children, aggregates: this.calculateAggregates(children), }; };
The following example demonstrates how to display the aggregate values in the footer with custom binding.
Aggregate Types
The TreeList supports the following aggregate types:
count—Returns the number of items in the subtree.sum—Calculates the total of all numeric values in the subtree.average—Calculates the average of all numeric values in the subtree.min—Finds the smallest value in the subtree.max—Finds the largest value in the subtree.
The following example demonstrates how to calculate several aggregates and display them in the footer template.