Angular 4中Kendo Grid多选时selectionChange仅返回单条选中行问题

嘿，这个问题我太熟悉了！你遇到的是Kendo Grid默认选择模式的小坑：

当你把selectable属性直接设为true时，Grid默认启用的是单选模式（single）——也就是说，不管你选多少行，它只会保留最后一次选中的那一行，所以event.selectedRows数组长度永远是1。

解决方法很简单，只需两步： #

1. 修改selectable的配置，明确开启多选模式
   把HTML中的[selectable]="true"替换成[selectable]="{ mode: 'multiple' }"，这样Grid就知道要允许同时选中多行。
2. 确保kendo-grid-checkbox-column已正确添加（你已经加了，这是触发多选的UI入口，没问题）

修改后的完整Grid代码示例： #

<kendo-grid *ngIf='!isLoading' style="width:100%; height: inherit;" class="ag-fresh"
            [data]='gridView'
            [selectable]="{ mode: 'multiple' }"
            [pageSize]='pageSize'
            [skip]='skip'
            [pageable]='true'
            (pageChange)='onGridPageChange($event)'
            (selectionChange)='onGridSelectionChange($event)'>
  <kendo-grid-checkbox-column></kendo-grid-checkbox-column>
  <!-- 你的其他列配置 -->
</kendo-grid>

验证效果 #

现在再触发selectionChange事件时，event.selectedRows就会包含所有你选中的行，console.log(event.selectedRows.length)也会正确显示选中的行数啦！

内容的提问来源于stack exchange，提问作者James Bender