Angular2中如何为Kendo-Grid行绑定双击事件并获取行数据？

有两种可靠方式实现双击获取目标行数据：

方法1：使用行模板绑定双击事件 #

通过kendoGridRowTemplate自定义行模板，直接在<tr>元素上绑定dblclick事件并传入当前行的dataItem：

<kendo-grid [data]="yourDataSource">
  <!-- 定义列 -->
  <kendo-grid-column field="id" title="ID"></kendo-grid-column>
  <kendo-grid-column field="name" title="名称"></kendo-grid-column>
  
  <!-- 自定义行模板 -->
  <ng-template kendoGridRowTemplate let-dataItem>
    <tr (dblclick)="onRowDblClick(dataItem)">
      <td>{{dataItem.id}}</td>
      <td>{{dataItem.name}}</td>
      <!-- 对应上面定义的每一列 -->
    </tr>
  </ng-template>
</kendo-grid>

组件类中实现处理方法：

onRowDblClick(dataItem: YourDataType): void {
  console.log('双击的行数据:', dataItem);
  // 这里处理业务逻辑
}

方法2：通过单元格双击事件关联行数据 #

如果不想自定义整个行模板，可在列模板的单元格上绑定dblclick事件，同样传入dataItem：

<kendo-grid [data]="yourDataSource">
  <kendo-grid-column title="ID">
    <ng-template kendoGridCellTemplate let-dataItem>
      <span (dblclick)="onCellDblClick(dataItem)">{{dataItem.id}}</span>
    </ng-template>
  </kendo-grid-column>
  <kendo-grid-column title="名称">
    <ng-template kendoGridCellTemplate let-dataItem>
      <span (dblclick)="onCellDblClick(dataItem)">{{dataItem.name}}</span>
    </ng-template>
  </kendo-grid-column>
</kendo-grid>

组件类处理方法：

onCellDblClick(dataItem: YourDataType): void {
  console.log('双击的行数据:', dataItem);
}

注意事项 #

• 方法1更高效，只需绑定一次行事件，无需为每个单元格重复绑定。
• 替换YourDataType为你定义的数据源类型，可获得TypeScript类型提示。

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