Question

如何在角度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

双击处理程序中的第一个参数需要是双击事件（您可以在模板中以$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 2

Melanie提供的示例可能在过去有效，但不适用于Angular 2/4网格（如果你点击了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 3

我们希望在网格上而不是在每一列上定义dblclick，因此，亚当的答案对我们来说非常适合chrome，但不适用于Firefox。

问题是path属性在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元素内单击了）

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

3 个答案: