# Angular Grid Selection Aggregates

The [Angular Grid](https://www.telerik.com/kendo-angular-ui/components/grid) enables you to select single or multiple cells or rows and calculate different metrics based on the selected data.

This functionality allows you to get a quick snapshot of some of the more important aggregates of the selected data. You can use the built-in approach and display these metrics at the bottom of the Grid or create your own elements that would display the data.

The Grid supports the following built-in aggregates for all selected cells:

* `max`—the greatest number. Valid for numeric fields.
* `min`—the smallest number. Valid for numeric fields.
* `sum`—the sum of all numbers. Valid for numeric fields.
* `average`—the average of all numbers. Valid for numeric fields.
* `count`—the total number of cells.
* `earliest`—the earliest date. Valid for `Date` fields.
* `latest`—the latest date. Valid for `Date` fields.
* `isTrue`—the total number of boolean fields with `true` value.
* `isFalse`—the total number of boolean fields with `false` value.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/grid/configuration/selection/aggregates-template/source.txt)

## Setup

To enable the selection aggregates of the Grid:

1. Set the [`selectable`](https://www.telerik.com/kendo-angular-ui/components/grid/api/gridcomponent#selectable) property to a [`SelectableSettings`](https://www.telerik.com/kendo-angular-ui/components/grid/api/selectablesettings) object where the [`cellAggregates`](https://www.telerik.com/kendo-angular-ui/components/grid/api/selectablesettings) option is set to:

   * `true`—Calculates all selection aggregates.
     ```ts
     public selectableSettings: SelectableSettings = {
         ...
         cellAggregates: true,
     };
     ```
   * [`SelectionAggregate`](https://www.telerik.com/kendo-angular-ui/components/grid/api/selectionaggregate)—Calculates specific aggregates.
     ```ts
     public selectableSettings: SelectableSettings = {
         ...
         cellAggregates: ['min', 'max', 'count'], x
     };
     ```

2. The Grid can handle the calculation of the selection aggregates, but does not show the result automatically. To display the aggregates in a dedicated status bar below the Grid, utilize the built-in [`StatusBarTemplateDirective`](https://www.telerik.com/kendo-angular-ui/components/grid/api/statusbartemplatedirective).

   ```html
   <ng-template kendoGridStatusBarTemplate let-aggregates="aggregates">
       @for (aggr of aggregates | keyvalue : originalOrder; track aggr) {
       <div>
         
         @if (aggr.value || aggr.value === 0) {
         <span class="k-selection-aggregates-item-text">
           {{ aggr.key }}:
         </span>
         <span class="k-selection-aggregates-item-value">
           {{ displayAggregates(aggr) }}
         </span>
         }
       </div>
       }
   </ng-template>
   ```

> There are two utility classes coming from the Kendo Themes that can be used to style the text and value of the cell selection aggregates.
> Use the `k-selection-aggregates-item-text` class for the name of the aggregate and the `k-selection-aggregates-item-value` class for its value.

## Displaying Selection Aggregates Externally

To display the aggregates within a custom element or component, handle the Grid [`selectionChange`](https://www.telerik.com/kendo-angular-ui/components/grid/api/gridcomponent#selectionchange) event and access the precalculated aggregates from the exposed event data.

The following example demonstrates how to display the selection aggregates in a custom element.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/grid/configuration/selection/aggregates-event/source.txt)

## Suggested Links

* [API Reference of the GridComponent](https://www.telerik.com/kendo-angular-ui/components/grid/api/gridcomponent)
* [API Index of the Grid](https://www.telerik.com/kendo-angular-ui/components/grid/api)