Kendo Angular - 如何获取 Kendo Grid 上 doubleClick 事件的数据？

Question

如何获取 Kendo Grid 上 doubleClick 事件的数据？

我想获得与在选定事件中获取的相同对象，该对象是 IndexRowSelected 位置中的数据项

HTML：

<kendo-grid
    #myGrid
    [data]="gridData"
    [selectable]="true"
    (selectionChange)="onSelection($event)"
    (dblclick)="doubleClickHandler(myGrid, $event)">
</kendo-grid>

TS：

onSelection(event){
   //dataItem at row selected
   event.selectedRows[0].dataItem
}

doubleClickHandler(grid, event){

//get dataItem like onSelection function

}

dataItem 对象示例： [{ “id”：0， "name":"柴", "类别": "饮料", “价格”：“18”， “库存”：“39”

}] 谢谢，

费德里科

Answer 1

我要做的是处理 SelectionChange 事件（documentation）以从所选行获取 dataItem，然后将值存储在私有变量中。

然后，当您处理双击事件时，您只需引用私有变量的值即可。

组件模板：

<kendo-grid [data]="gridData"
            [height]="410"
            [selectable]="true"
            (dblclick)="onGridDoubleClicked()"
            (selectionChange)="onGridSelectionChanged($event)">
    <!-- column definitions... -->
</kendo-grid>

组件的打字稿：

private selectedRecord: any | undefined;
onGridDoubleClicked(): void {
  // do something with this.selectedRecord
}

onGridSelectionChanged(e: SelectionEvent): void {
  if (!e.selectedRows?.length) {
    return;
  }
  this.selectedRecord = e.selectedRows[0].dataItem;
}

示例：https://stackblitz.com/edit/angular-n4cn9w-phvv6a?file=app%2Fapp.component.ts

---

2024-03-13更新

LiborV 提供了这种双击解决方案无法按预期工作的场景。如果您选择一行并双击网格上的任意位置（包括页眉/页脚），那么它仍然会触发

onGridDoubleClicked

事件中的代码。

这是有问题的，我没有好的解决方案来解决这个问题。