Kendo Angular 2 grid with checkbox column

I think i found a simular but maybe cleaner solution:

use the "kendo-grid-checkbox-column" component:

<kendo-grid-checkbox-column>
    <ng-template kendoGridHeaderTemplate let-dataItem>
        <input 
            type="checkbox" 
            name="selectAll"
            (change)="selectAllRows($event)" 
            [checked]="allRowsSelected"/>
    </ng-template>
</kendo-grid-checkbox-column>

with attributes in kendo-grid

[selectedKeys]="rowSelected"

and

[kendoGridSelectBy]="rowsSelectedKeys"

you can then in the controller affect those value:

private rowsSelected: number[] = [];

private rowsSelectedKeys(context: RowArgs): number {
    return context.dataItem.id;
}

private selectAllRows(e): void {
    if (e.target.checked) {
      this.allRowsSelected = true;
      this.rowsSelected = this.gridData.data.map(o => o.id);
    } else {
      this.allRowsSelected = false;
      this.rowsSelected = [];
    }
}

the avantage of using the grid data is that if you have filters, then it will "check" only the data filtered. In my example, you can then on any event handle the ids of the rows checked.

This is how I implemented it. I can't see how you are databinding, I used GridDataResult. I simplified the grid for the sake of this example.

some required components, particularly GridDataResult, State and process I use in this example:

import { GridDataResult, PageChangeEvent } from '@progress/kendo-angular-grid';
import { SortDescriptor, State, process } from '@progress/kendo-data-query';

A couple local variables:

export class ClassComponent {
    gridViewAdd: GridDataResult;  // stores grid data
    allStudentsSelected: boolean = false;  // bound to header checkbox
    stateAdd: State = {   // will hold grid state
        skip: 0,
        take: 2
    };

Component HTML grid. One note here, I had to set the header column that holds the checkbox to sortable=false to get the click event to register.

<kendo-grid 
[data]="gridViewAdd">
    <kendo-grid-column [sortable]="false" field="add" width="50" [headerStyle]="{'text-align': 'center'}" [style]="{'text-align': 'center'}">
        <ng-template kendoGridHeaderTemplate let-dataItem>
            <input style="zoom: 1.2;" 
                 type="checkbox" 
                 name="selectAll"
                 (change)="selectAllStudentsChange($event)" 
                 [checked]="allStudentsSelected"/>
         </ng-template>
         <ng-template kendoGridCellTemplate let-dataItem>
             <input style="zoom: 1.2;" 
                 type="checkbox" 
                 [checked]="dataItem.add" />
         </ng-template>
    </kendo-grid-column>
</kendo-grid>

This is where I bind to the data object array:

private loadStudents(): void {
    this.gridViewAdd = process(this.students, this.stateAdd);
}

And this is the click event. You can grab the current items in the grid through the GridDataResult variable I set earlier. Loop through your data and update the data element bound to your checkboxes. Mine is a boolean value named "add"

selectAllStudentsChange(e): void {
    // switch inactive checked value
    if (e.target.checked)
    {
        this.allStudentsSelected = true;
        for (let i = 0;i < this.gridViewAdd.data.length; i++) {
            this.gridViewAdd.data[i].add = true;
        }
    } else {
        this.allStudentsSelected = false;
        for (let i = 0;i < this.gridViewAdd.data.length; i++) {
            this.gridViewAdd.data[i].add = false;
        }
    }
}