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

发布于 2025-01-13 02:04:03 字数 776 浏览 4 评论 0原文

如何获取 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 对象示例中位置的 dataitem： [{ “id”：0， "name":"柴", "类别": "饮料", “价格”：“18”， “库存”：“39”

}] 谢谢，

费德里科

原文

How to get data on the doubleClick event on Kendo Grid?

I would like to get the same object that I fetch at the selected event, which would be dataitem in the position of 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 object example:
[{
"id":0,
"name":"Chai",
"category": "Beverages",
"price": "18",
"instock": "39"

}]

thanks,

Federico

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

绿萝 2025-01-20 02:04:03

我要做的是处理 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 事件中的代码。

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

What I would do is handle the SelectionChange event (documentation) to get the dataItem from the selected row and then store the value in a private variable.

Then when you handle the double-click event, you'd simply reference the private variable's value.

Component's Template:

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

Component's Typescript:

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;
}

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

2024-03-13 Update

LiborV provided a scenario where this double-click solution could not work as intended. If you select a row and double-click anywhere on the grid (including the header/footer) then it would still trigger the code in the onGridDoubleClicked event.

This is problematic and I do not have a good solution to resolve this.

回复收藏 0 原文

恬淡成诗 2025-01-20 02:04:03

正确的方法是处理 cellClick 和 dblclick 事件。这是因为当您双击时，您会收到一个 cellClick 事件，然后是一个 dblclick 事件，然后是另一个具有相同信息的 cellClick 事件。第一个 cellClick 事件包含有关单击或即将双击的内容的信息。

 <kendo-treelist
      (cellClick)="itemClicked($event)"
      (dblclick)="itemDoubleClicked()"
    ...
    >
</kendo-treelist>

itemClicked($event: CellClickEvent) {
    this.clickedItem = $event.dataItem;
    console.log('clicked', this.clickedItem);
  }

  itemDoubleClicked() {
    console.log('double clicked', this.clickedItem);
  }

The correct way to do this is to handle both the cellClick and dblclick event. This is because when you double click, you get a cellClick event followed by a dblclick event followed by another cellClick event with the same information. The first cellClick event has information on what was clicked or about to be double clicked.

 <kendo-treelist
      (cellClick)="itemClicked($event)"
      (dblclick)="itemDoubleClicked()"
    ...
    >
</kendo-treelist>

itemClicked($event: CellClickEvent) {
    this.clickedItem = $event.dataItem;
    console.log('clicked', this.clickedItem);
  }

  itemDoubleClicked() {
    console.log('double clicked', this.clickedItem);
  }

回复收藏 0 原文

~没有更多了~