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

您必须用<ng-template>标签包裹<kendo-grid>标签，然后才能使用单元格单击事件发射器(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

1 个答案: