Selecting All Items within a Grid Group

Environment

Product

Progress® Kendo UI® for Angular Grid

Description

How to select all items within a group by using a group header checkbox?

Solution

To select all items within a group using a checkbox:

1. Use the kendoGridGroupHeaderTemplate directive to display the custom checkbox in the group header.

   html

   <ng-template kendoGridGroupHeaderTemplate let-group="group">
       <span>
         <input
             type="checkbox"
             kendoCheckBox
             (input)="onSelectAllChange($event, group)"
           />
       </span>
       {{ group.field }}
   </ng-template>

2. Handle the input event of the checkbox and manually control the selected items by using the selectedKeys property of the SelectionDirective.

   ts

   public onSelectAllChange(e, groupItems) {
       const checkedState = e.srcElement.checked;
       if (checkedState === true) {
           this.mySelection = groupItems.items.map((item) => item.ProductID);
       } else {
           this.mySelection = [];
       }
   }

The following example demonstrates how to select all rows within a group.

Change Theme

Theme

Loading ...

See Also

Grid Groping Selection