Get list of selected rows from Kendo grid in Angular 2+

Question

I'm using the Kendo for Angular grid in an Angular 4 application. I have selectable set to 'true', a column in my grid with the kendo-grid-checkbox-column, and selectionChange set to a function that takes the event parameter as an argument.

In my selectionChange handler, the selectedRows array on the event parameter only has one value in it, regardless of how many rows are selected.

Thanks, James

My code:

    onGridSelectionChange(event: SelectionEvent) {
        debugger;
        console.log(event.selectedRows.length); // this is always 1
    };

<kendo-grid *ngIf='!isLoading' style="width:100%; height: inherit;" class="ag-fresh" [data]='gridView' [selectable]="true"
            [pageSize]='pageSize' [skip]='skip' [pageable]='true' (pageChange)='onGridPageChange($event)'
            (selectionChange)='onGridSelectionChange($event)'>

Answer 1

You are using the wrong event of the grid. You should use selectedKeysChange

<kendo-grid ...
  [kendoGridSelectBy]="'id'"
  (selectedKeysChange)="selectedKeysChange($event)">
  ...
</kendo-grid>

Also, you have to set the field used to select the row (kendoGridSelectBy). In this example it's the ID.

Get the selection:

selectedKeysChange(rows: number[]) {
  console.log(rows);
}