从Angular 2+中的剑道网格中获取选定行的列表答案

【问题标题】：Get list of selected rows from Kendo grid in Angular 2+从Angular 2+中的剑道网格中获取选定行的列表
【发布时间】：2018-11-01 14:12:18
【问题描述】：

我在 Angular 4 应用程序中使用 Kendo for Angular 网格。我将 selectable 设置为“true”，在我的网格中设置了一个带有 kendo-grid-checkbox-column 的列，并将 selectionChange 设置为一个将事件参数作为参数的函数。

在我的 selectionChange 处理程序中，事件参数上的 selectedRows 数组中只有一个值，无论选择了多少行。

谢谢，詹姆斯

我的代码：

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

【问题讨论】：

你解决了这个问题吗？

标签： javascript angular kendo-ui kendo-grid

【解决方案1】：

您使用了错误的网格事件。你应该使用selectedKeysChange

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

此外，您必须设置用于选择行的字段 (kendoGridSelectBy)。在本例中，它是 ID。

获取选择：

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

【讨论】：

【解决方案2】：

看看下面的例子：

EXAMPLE

所有选择的键都保存在一个集合 (mySelection) 中，我们也可以通过编程操作来选择/取消选择行。您可以保留代表所选数据项的整个对象，而不是保留键（将 kendoGridSelectBy 绑定到将返回 eventArgs.dataItem 的函数）。

【讨论】：

【解决方案3】：

将 [selectable]="true" 更改为：

[可选]="{启用：真，模式：'多个'}"

当我添加模式时：'multiple' 我能够获得列表..

【讨论】：