Angular KendoUI网格：添加双击事件并获取选中行数据

我来帮你梳理这个问题的解决方案，你当前的写法核心问题是把双击事件绑定在了整个Grid容器上，而不是具体的行元素，所以没法直接拿到当前行的数据。下面分两种可靠的方式来实现：

方法一：使用Kendo Grid内置的rowDblClick事件（推荐） #

Kendo Grid提供了专门的行双击事件，会直接返回当前行的dataItem，不需要自己去DOM里查找，非常省心：

模板代码 #

<kendo-grid 
  [data]="gridData" 
  (rowDblClick)="onRowDoubleClicked($event)">
  <!-- 你的列定义 -->
  <kendo-grid-column field="accountId" title="账户ID"></kendo-grid-column>
  <kendo-grid-column field="accountName" title="账户名称"></kendo-grid-column>
</kendo-grid>

组件逻辑 #

import { RowArgs } from '@progress/kendo-angular-grid';

// 组件类中定义方法
onRowDoubleClicked(args: RowArgs): void {
  // args.dataItem就是当前双击行的完整数据
  const selectedRow = args.dataItem;
  console.log('选中的行数据:', selectedRow);
  
  // 这里可以添加你的业务逻辑，比如存储选中项、跳转到详情页等
  this.selectedAccount = selectedRow;
}

方法二：自定义行模板绑定双击事件 #

如果你需要更灵活的行自定义，可以用kendoGridRowTemplate来手动绑定双击事件，直接把当前行的dataItem传进去：

模板代码 #

<kendo-grid [data]="gridData">
  <ng-template kendoGridRowTemplate let-dataItem>
    <!-- 把双击事件绑定到<tr>上，直接传入当前行的dataItem -->
    <tr (dblclick)="selectAccount(dataItem)">
      <td>{{dataItem.accountId}}</td>
      <td>{{dataItem.accountName}}</td>
    </tr>
  </ng-template>
</kendo-grid>

组件逻辑 #

selectAccount(selectedRow: any): void {
  console.log('双击选中的行:', selectedRow);
  this.selectedAccount = selectedRow;
}

补充：实现选中行的视觉高亮（无内置selectable时） #

因为你没有用Grid的selectable属性，如果你需要高亮选中的行，可以在组件里维护一个selectedAccount变量，然后通过CSS类来实现：

模板修改 #

<ng-template kendoGridRowTemplate let-dataItem>
  <tr 
    (dblclick)="selectAccount(dataItem)"
    [class.highlighted-row]="dataItem === selectedAccount">
    <td>{{dataItem.accountId}}</td>
    <td>{{dataItem.accountName}}</td>
  </tr>
</ng-template>

添加CSS样式 #

.highlighted-row {
  background-color: #f0f8ff; /* 自定义高亮背景色，可根据需求调整 */
}

为什么你的原写法不行？ #

你之前的代码<kendo-grid [data]="gridData" (dblclick)="selectAccount(gridData, $event)">有两个问题：

1. 事件绑定在整个Grid容器上，触发的是容器的双击事件，$event是DOM事件对象，无法直接关联到具体的行数据；
2. 传递gridData是整个数据集，不是当前双击的单行数据，自然拿不到你想要的选中项。

把事件绑定到行级别，不管用内置事件还是自定义模板，都能直接拿到当前行的dataItem，问题就解决啦。

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