如何在 kendo ui grid angular 2 中执行行双击事件？

Question

如何在 Angular 2 kendo ui 网格中的单元格模板<span> 标记中显示原始单元格值。

代码

<ng-container ngFor="let col of grid.ColModel">
    <kendo-grid-column [title]="col.Label" [field]="col.Name" [locked]="col.Locked" width="250px" *ngIf="hiddenColumns.indexOf(col.Name) === -1" >
        <template kendoCellTemplate let-dataItem let-rowIndex="rowIndex" >
        <span (dblclick)="open(rowIndex)">**{{dataItem}}** </span>
        </template>
    </kendo-grid-column>
</ng-container>

Answer 1

Melanie 提供的示例在过去可能有效，但不适用于 Angular 2/4 Grid（如果单击 plunker，它将无法加载）。

当我遇到同样的问题时，我必须进行大量调试。

简单网格中的解决方案如下：

 <kendo-grid #myGrid [selectable]="true" (dblclick)="dblClickEvent(myGrid, $event)">
 <kendo-grid-column field="User" title="User" width="100">
                    </kendo-grid-column>
</kendo-grid>

在您的 .ts 文件中，按如下方式实现事件：

     dblClickEvent(grid, event) {
        // debugger;
      console.log('the selected row Index is '+ event.path[1].rowIndex);
      //use the following line if you want to get the clicked cell content:
console.log('clicked cell content'+ event.path[0].textContent);

}

这会给你选择的行索引，你可以从中

希望这会有所帮助。

Answer 2

双击处理程序中的第一个参数必须是双击事件（您可以在模板中以$event 的形式访问它）。你应该先通过，然后rowIndex 第二。

此外，您可能会错过很多 click 事件，因为您使用的是 span 并且您的内容位于填充单元格内。我建议您将整个单元格设置为点击目标，例如将其更改为 div 并去掉包含 td 的填充。

因此您的单元格模板可能如下所示：

<kendo-grid-column field="MyField">
    <template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
        <div class="innerCell" (dblclick)="onRowDoubleClick($event, rowIndex)">
            {{dataItem.MyField}}
         </div>
    </template>
</kendo-grid-column>

还有你的功能：

onRowDoubleClick(evt, rowIndex) {
  alert('You clicked row ' + rowIndex + '!');
}

还有你的造型：

td { padding: 0 !important; }
td > .innerCell { padding: 7px; cursor: pointer; }

示例：Plunker

Answer 3

更新：

如果你有一个可排序的网格，你需要像这里一样实现 cellClick 和 dblClick： https://stackblitz.com/edit/angular-ac3jzd?file=app/app.component.ts

这适用于：已排序和未排序的剑道网格

原始答案：

我们喜欢在网格上而不是在每一列上定义 dblclick，所以 Adam 的答案在 chrome 中非常适合我们，但在 Firefox 中却不行。

问题是 mouseevent 上的路径属性是非标准的，并且在 firefox 中没有提供（可能在 safari 中也没有）

基于亚当的解决方案，我们已经解决了：

<kendo-grid [selectable]="true" (dblclick)="dblClickEvent($event)">
 <kendo-grid-column field="User" title="User" width="100"></kendo-grid-column>
</kendo-grid>

和：

  dblClickEvent(event) {
    let rowIndex;
    if (event.path) { // works on chrome and all browsers supporting path property in mouseevent
      rowIndex = event.path[1].rowIndex;
    } else { // should work on all browsers
      rowIndex = event.target.parentElement.rowIndex;
    }

    if (typeof rowIndex === 'number' && rowIndex < this.data.length) {
      // do something
    }
  }

（假设用户点击了一个 td 元素）

注意：如果网格已排序，这将不起作用