在 Kendo UI Grid (Angular 2) 中选择行时触发事件答案

【问题标题】：Trigger event when row is selected in a Kendo UI Grid (Angular 2)在 Kendo UI Grid (Angular 2) 中选择行时触发事件
【发布时间】：2017-04-15 02:17:40
【问题描述】：

在kendo ui（beta）对于Angular 2，如何在选择特定行时触发一个事件？行本身没有指令或组件；因此，如果没有行元素， (click)="triggeredFunction()" 将无法工作。

这是我的网格：

<kendo-grid [data]="gridData" [selectable]="true">

  <kendo-grid-column field="ProductName">
    <template kendoHeaderTemplate let-column let-columnIndex="columnIndex">
     {{column.field}}({{columnIndex}})
    </template>
  </kendo-grid-column>     

  <kendo-grid-column field="ProductName">
    <template kendoCellTemplate let-dataItem>
      <kendo-dropdownlist [data]="listItems"></kendo-dropdownlist>
    </template>
  </kendo-grid-column>

</kendo-grid>

这是我的组件：

@Component({
 selector: "ultron",
 styleUrls: [String("./ultron.component.less")],
 templateUrl: "./ultron.component.html",
 })
 export class UltronComponent {

   private gridData: any[] = [{
      "ProductID": 1,
      "ProductName": "Chai",
      "UnitPrice": 18.0000,
      "Discontinued": true,
    }, {
      "ProductID": 2,
      "ProductName": "Chang",
      "UnitPrice": 19.0000,
      "Discontinued": false,
    }
  }];

  private listItems: Array<string> = ["@", "$", "#", "%"];

  public triggeredFunction(){ ... }

}

【问题讨论】：

试试[selectable]="'row'" docs.telerik.com/kendo-ui/api/javascript/ui/…
@DanWilson，感谢您的快速回复。您发送给我的链接适用于 Angular 1（我需要 Angular 2）。所以..我把我的函数放在你提到的位置[selectable]="triggeredFunction()"，它会在每次页面上发生变化时触发，当你点击一行时，你如何传递特定的行数据到组件？
我认为您需要将'row' 指定为可选组件并提供(change) 处理程序，这将是您的triggeredFunction()。 demos.telerik.com/kendo-ui/grid/events
@DanWilson。再次感谢您的回复。我将其更改为[selectable]="'row'"，并为(change) 创建了一个处理程序，但没有任何反应。我不确定我是否将处理程序放置在错误的位置，它应该放置在哪里？您还不断发送指向 Angular 1 文档的链接，这不适用于 Angular 2。

标签： events angular kendo-ui kendo-grid kendo-ui-angular2

【解决方案1】：

您需要设置的选项是selectable，有效值为true 和false，因为目前仅支持单行选择。所以你的网格应该是这样的

<kendo-grid
      [data]="gridView"
      [selectable]="true"
    >
  </kendo-grid>

对于需要附加(selectionChange) 事件处理程序的事件。这是plunkr

【讨论】：

谢谢！谢谢！奇迹般有效。是否可以传入选定的行元素或行数据？我尝试了 $event ，但它只给了我索引。使用KendoCellsTemplates，您可以使用let-dataItem 来获取行数据，有什么可以用于选定的整行吗？
$event 将为您提供所选项目的索引，然后您可以从数据数组中获取它 - 这里是plnkr.co/edit/xEB6JN9ZVjm499G2KreX?p=preview
@knikolov 当我们进行排序时，索引会不断变化，所以当我们尝试使用该索引查找数据时，它会显示错误的数据。您还有其他解决方案吗？
您可以像这样检索行数据： public onSelect(e) { // e.selectedRows[0].dataItem.Id }
我们是否有任何页面可以提供角剑道网格 2 的所有可用事件

【解决方案2】：

通过可选选项启用 Kendo UI 中的选择。选定的行索引和选定状态是通过 selectionChange 事件提供的。如果您还在网格中对数据进行排序或分页，那么您将被绑定到 GridDataResult。要获取网格中选定行的绑定项，请使用 GridDataResult 的 data 属性。请参阅以下代码示例：

import { Component } from '@angular/core';
import { GridDataResult, SelectionEvent } from "@progress/kendo-angular-grid";
import { SortDescriptor, orderBy } from "@progress/kendo-data-query";


@Component({
    selector: 'my-app',
    template: `
            <kendo-grid [data]="gridDataResult" [selectable]="true" [height]="500" 
                [sortable]="true" (selectionChange)="selectedRowChange($event)" 
                [sort]="sort" (sortChange)="sortChange($event)">
                <kendo-grid-column field="ProductID" title="Product ID" [width]="300"></kendo-grid-column>
                <kendo-grid-column field="ProductName" title="Product Name"></kendo-grid-column>
                <kendo-grid-column field="UnitPrice" title="UnitPrice"></kendo-grid-column>
                <kendo-grid-column field="Discontinued" title="Discontinued"></kendo-grid-column>
            </kendo-grid>
            `
})

export class AppComponent {
    public sort: SortDescriptor[] = [{ dir: "asc", field: "ProductID" }];

    private gridDataResult: GridDataResult;

    public products: any[] = [{
        "ProductID": 1,
        "ProductName": "Chai",
        "UnitPrice": 18.0000,
        "Discontinued": true,
    }, {
        "ProductID": 2,
        "ProductName": "Chang",
        "UnitPrice": 19.0000,
        "Discontinued": false,
    }
    ];

    protected sortChange(sort: SortDescriptor[]): void {
       this.sort = sort;
       this.gridDataResult = {
            data: orderBy(this.products, this.sort),
            total: this.products.length
        };
    }

    public selectedRowChange(selectionEvent: SelectionEvent) {
        let selectedItem = this.gridDataResult.data[selectionEvent.index];
        console.log(selectedItem);
    }
}

【讨论】：

当我用 CTRL 选择多行时， selectedRows 只包含最后一个选择的元素。但是使用 SHIFT，它可以正常工作。我需要使用 CTRL 进行选择并获取所选项目的数量。

【解决方案3】：

只是对原始答案的补充，除了 plunker 的一个变化之外仍然是正确的

应该是 this.gridView.data[e.index]

如果其他人来到这个页面，可以得到最新的信息。

【讨论】：