Управлять данными строки KendoUI Angular Grid в столбце флажка CheckBox Проверено Изменить событие?

Question

Я работаю над сеткой KendoUI angular, где у меня есть столбец CheckBox. В этом столбце я хочу выделить событие изменения отдельных строк и передать данные строки контроллеру машинописного текста. Также он должен иметь опцию «выбрать все» в верхней части столбца.

Пока я застрял в указании события для запуска в kendo-grid-checkbox-column.

Вот мой код: Рабочая ссылка stackblitz здесь .

Шаблон:

`     <kendo-grid [data]="gridData" [selectable]="{enabled: true, checkboxOnly: true}">

         <kendo-grid-column field="ProductID" title="Product ID" width="120">
         </kendo-grid-column>
         
         <kendo-grid-column field="ProductName" title="Product Name">
         </kendo-grid-column>
         
         // This is where I need to get the checked change event 
         <kendo-grid-checkbox-column title="Food" showSelectAll="true">
         </kendo-grid-checkbox-column>
         
          // Some what similar behaviour needs to be there in Food column
         <kendo-grid-checkbox-column  title="Opt In" showSelectAll="true" >
           <ng-template  kendoGridCellTemplate kendoGridDetailTemplate let-dataItem let-idx="rowIndex">
             Select row <input (change)="checkChangeEvent(dataItem)" [kendoGridSelectionCheckbox]="idx" />
           </ng-template>
         </kendo-grid-checkbox-column>

       </kendo-grid>`

контроллер:

`export class AppComponent {
   public gridData: any[];


public products = [{
   "ProductID": 1,
   "ProductName": "Chai",
   "UnitPrice": 18.0000,
   "Discontinued": true
 }, {
   "ProductID": 2,
   "ProductName": "Chang",
   "UnitPrice": 19.0000,
   "Discontinued": false
 }
];


   constructor() {
       this.gridData = this.products;
   }

   checkChangeEvent(event){
     console.log(event)
   }
}`

Заранее спасибо.