如何将点击事件添加到 kendoGridCellTemplate

Question

我想知道如何将点击事件处理程序添加到 kendo 网格单元格。
这是我的代码：

<ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
          <div class="w-100 timeline-cell-container">
            <ng-container *ngFor="let item of getTimelineField(parentColumn.field, dataItem, true); let i=index">
              <div class="timeline-cell position-absolute" [ngStyle]="getTimelineCellStyle(item)">
                {{ item.value }}
              </div>
            </ng-container>
          </div>
</ng-template>

我知道我可以将 onclick 事件添加到内部 div，但是有没有办法将它附加到单元格本身？
我看过 https://www.telerik.com/kendo-angular-ui/components/grid/api/CellClickEvent/ 但不明白如何使用它，或者这是否是正确的使用方式？这就是我填写单元格信息的方式：

const buildObj = {
          value: [jobObject.job],
          type: 'cell',
          startFrom: this.calcTimelineJobStart(startDate, index, width),
          width,
          color: this.colorCode(jobObject.job),
          class:'hint'
        };

Answer 1

你必须用 <kendo-grid> 标签包裹你的 <ng-template> 标签，然后你可以使用单元格点击事件发射器 (cellClick)="cellClickHandler($event)

<kendo-grid #grid (cellClick)="cellClickHandler($event)">
<ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
          <div class="w-100 timeline-cell-container">
            <ng-container *ngFor="let item of getTimelineField(parentColumn.field, dataItem, true); let i=index">
              <div class="timeline-cell position-absolute" [ngStyle]="getTimelineCellStyle(item)">
                {{ item.value }}
              </div>
            </ng-container>
          </div>
</ng-template>
<kendo-grid/>

然后在打字稿文件中实现cellClickHandler：

public cellClickHandler({ sender, rowIndex, columnIndex, dataItem, isEdited }) {
  // your code here
  console.log(rowIndex, columnIndex)
}

查看此文档了解更多信息：link

如何将点击事件添加到 kendoGridCellTemplate

How can I add click event to kendoGridCellTemplate

kendo-ui

angular