Displaying Row Count Selection Aggregate in Kendo UI for Angular Grid
Environment
| Product | Progress® Kendo UI® for Angular Grid |
Description
When using the selection aggregates feature of the Kendo UI for Angular Grid, the built-in count aggregate represents the total number of selected cells. However, I need to display the count of the currently selected rows as an aggregate in the Grid instead. How can I achieve this behavior?
This Knowledge Base article also answers the following questions:
- How can I display the total number of selected rows in the Kendo UI for Angular Grid?
- How to modify the built-in
countselection aggregate to show the number of selected rows? - How to display the selected rows count as a separate aggregate in the Kendo UI for Angular Grid?
Solution
Use the selectedKeys property that the SelectionDirective of the Grid provides to obtain the total number of the currently selected rows when row selection is enabled.
<kendo-grid
...
kendoGridSelectBy
[(selectedKeys)]="mySelection">
</kendo-grid>To display the selected row count as an aggregate in the dedicated status bar below the Grid, along with the built-in selection aggregates, utilize the StatusBarTemplateDirective of the component.
After that, depending on whether you also want to keep the built-in count selection aggregate that displays the total number of selected cells, utilize either of the following approaches:
Modify the Count Aggregate to Display Selected Rows Count
To modify the built-in count selection aggregate of the Grid to display the total number of selected rows instead of cells, adjust the approach suggested in the Selection Aggregates article.
Specifically, extend the custom displayAggregates() method used in the kendoGridStatusBarTemplate to replace the value for the count aggregate key and return the length of the selectedKeys array instead.
<ng-template kendoGridStatusBarTemplate let-aggregates="aggregates">
<div *ngFor="let aggr of aggregates | keyvalue : originalOrder">
<span class="k-selection-aggregates-item-text">
{{ aggr.key }}:
</span>
<span class="k-selection-aggregates-item-value">
{{ displayAggregates(aggr) }}
</span>
</div>
</ng-template>public displayAggregates(aggr): any {
if (aggr.key === 'count') {
// Return the length of the collection bound to the `selectedKeys` property.
return this.mySelection.length;
}
return aggr.value;
}The following example demonstrates the suggested approach in action.
Display Selected Rows Count Separately
If you prefer to retain the original count aggregate for the selected cells in the Grid, display the selected rows count separately in the kendoGridStatusBarTemplate.
<ng-template kendoGridStatusBarTemplate let-aggregates="aggregates">
...
<span class="k-selection-aggregates-item-text"> rows count: </span>
<span class="k-selection-aggregates-item-value">
{{ mySelection.length }}
</span>
</ng-template>The following example demonstrates the full implementation of the second approach.