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

ed-*_*ter 6 events kendo-ui kendo-grid kendo-ui-angular2 angular

在Angular 2的Kendo UI(beta)中,如何在选择特定行时触发事件?行本身没有指令或组件; 因此,如果没有行元素,则(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>
Run Code Online (Sandbox Code Playgroud)

这是我的组件:

@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(){ ... }

}
Run Code Online (Sandbox Code Playgroud)

kni*_*lov 9

您需要设置的选项是selectable有效值,true并且false目前仅支持单行选择.所以你的网格应该是这样的

<kendo-grid
      [data]="gridView"
      [selectable]="true"
    >
  </kendo-grid>
Run Code Online (Sandbox Code Playgroud)

对于事件,您需要附加(selectionChange)事件处理程序.这是一个傻瓜