Angular Grid Selection Aggregates

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

Setup

To enable the selection aggregates of the Grid:

1. Set the selectable property to a SelectableSettings object where the cellAggregates option is set to:

   • true—Calculates all selection aggregates.
     ts

     public selectableSettings: SelectableSettings = {
         ...
         cellAggregates: true,
     };

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

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

Suggested Links

• API Reference of the GridComponent
• API Index of the Grid