CODEWITHSUNDEEP
javascriptangularkendo-uikendo-grid
James Bender
James Bender

Reputation: 1232

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

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)'>

Upvotes: 6

Views: 10681

Answers (3)

liron_hazan
liron_hazan

Reputation: 1546

change [selectable]="true" to:

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

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

Upvotes: 1

Tonatio
Tonatio

Reputation: 4198

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

Upvotes: 6

topalkata
topalkata

Reputation: 2098

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).

Upvotes: 2

Related Questions