Kendo UI for Angular 表格单元格接入外部内容的Tooltip实现方案咨询

实现方案 #

Kendo Angular Grid 可以通过以下两种方案实现Tooltip读取行级额外字段的需求，其中lastEditor为示例字段，请替换为后端实际返回的最近编辑人字段名：

方案1：单元格模板内嵌Tooltip（推荐，逻辑直观）

直接通过单元格模板拿到当前行的完整dataItem，绑定到Tooltip内容上即可，无需额外事件处理：

<kendo-grid [height]="200" [data]="myModel">
  <kendo-grid-column field="one" title="First column" width="90">
    <ng-template kendoGridCellTemplate let-dataItem>
      <div kendoTooltip [tooltipContent]="dataItem.lastEditor">
        {{ dataItem.one }}
      </div>
    </ng-template>
  </kendo-grid-column>
  <kendo-grid-column field="two" title="Second column" width="60">
    <ng-template kendoGridCellTemplate let-dataItem>
      <div kendoTooltip [tooltipContent]="dataItem.lastEditor">
        {{ dataItem.two }}
      </div>
    </ng-template>
  </kendo-grid-column>
  <kendo-grid-column field="three" title="Third column" width="120">
    <ng-template kendoGridCellTemplate let-dataItem>
      <div kendoTooltip [tooltipContent]="dataItem.lastEditor">
        {{ dataItem.three }}
      </div>
    </ng-template>
  </kendo-grid-column>
</kendo-grid>

前置依赖：需要在对应模块中导入TooltipModule。

方案2：全局Grid绑定Tooltip（适合列数多的场景）

如果列数较多/列是动态生成的，不需要逐个改列模板，直接在Grid上绑定全局Tooltip，通过show事件动态取对应行数据即可：

<kendo-grid 
  [height]="200" 
  [data]="myModel"
  kendoTooltip
  filter="td"
  (show)="onTooltipShow($event)"
>
  <kendo-grid-column field="one" title="First column" width="90"></kendo-grid-column>
  <kendo-grid-column field="two" title="Second column" width="60"></kendo-grid-column>
  <kendo-grid-column field="three" title="Third column" width="120"></kendo-grid-column>
</kendo-grid>

组件TS逻辑：

import { TooltipShowEvent } from '@progress/kendo-angular-tooltip';

// 组件内部代码
public onTooltipShow(e: TooltipShowEvent): void {
  // 获取当前单元格对应的行元素
  const rowEl = e.anchor.closest('tr.k-grid-row');
  if (!rowEl) return;
  // 读取行索引获取对应数据源
  const rowIndex = Number(rowEl.getAttribute('data-kendo-grid-item-index'));
  const rowData = this.myModel[rowIndex];
  e.sender.content = rowData?.lastEditor || '无编辑记录';
}

内容的提问来源于stack exchange，提问作者Ewgenij Sokolovski