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);
}

Answer 2

Take a look at the following example:

EXAMPLE

All selected keys are kept in a collection (mySelection) that we can also manipulate to select/deselect rows programmatically. Instead of keeping the keys, you can keep the whole objects, representing the selected data items instead (bind kendoGridSelectBy to a function that will return eventArgs.dataItem).

Answer 3

change [selectable]="true" to:

[selectable]="{enabled: true, mode: 'multiple'}"

when I added the mode: 'multiple' I was able to get the list..