关于Kendo Angular 2 Grid的Row Template及行级指令添加的问询

首先明确回答：你的需求完全可行！下面针对你提到的两个问题详细说明：

关于Kendo Grid for Angular的行模板支持 #

没错，Kendo Grid for Angular确实支持自定义行渲染逻辑——虽然官方文档里没有直接用“Row Template”这个命名，但可以通过**<kendo-grid-row>组件结合Angular模板语法**实现和jQuery版Grid中行模板完全一致的效果，你可以完全控制行内的内容、样式、指令绑定等逻辑。

实现行级Tooltip的具体步骤 #

要给表格行添加行级Tooltip，最直观的方式是结合Kendo的Tooltip组件（或Angular原生Tooltip指令），通过模板绑定实现。下面是完整的可运行示例：

1. 导入所需模块 #

在你的组件所属模块中，导入Grid和Tooltip的核心模块：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { GridModule } from '@progress/kendo-angular-grid';
import { TooltipModule } from '@progress/kendo-angular-tooltip';

import { YourComponent } from './your.component';

@NgModule({
  imports: [BrowserModule, GridModule, TooltipModule],
  declarations: [YourComponent],
})
export class YourModule { }

2. 组件模板中实现行级Tooltip #

使用kendoGridRowTemplate自定义行模板，并给行元素绑定Tooltip：

<kendo-grid [data]="gridDataSource">
  <!-- 自定义行模板，绑定Tooltip -->
  <ng-template kendoGridRowTemplate let-dataItem>
    <tr kendoTooltip [tooltipContent]="rowTooltipTpl" showOn="hover">
      <td>{{dataItem.id}}</td>
      <td>{{dataItem.name}}</td>
      <td>{{dataItem.price | currency}}</td>
    </tr>
  </ng-template>

  <!-- Tooltip的内容模板 -->
  <ng-template #rowTooltipTpl let-dataItem>
    <div class="custom-tooltip">
      <h5>{{dataItem.name}}</h5>
      <p>ID: {{dataItem.id}}</p>
      <p>单价: {{dataItem.price | currency}}</p>
      <p>库存: {{dataItem.stock}}</p>
    </div>
  </ng-template>
</kendo-grid>

3. 可选：优化Tooltip样式 #

.custom-tooltip {
  padding: 10px 14px;
  min-width: 200px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

补充说明 #

如果不需要完全自定义整行内容，只是想给默认生成的行添加Tooltip，也可以通过Grid的dataBound事件，在事件回调中给行元素手动绑定Tooltip逻辑，但上面的模板方式更符合Angular组件化思想，代码更简洁易维护。

另外，官方API文档中的kendoGridRowTemplate就是实现自定义行的核心指令，你可以在Grid的API索引中找到它的详细参数说明，用来扩展更多行级自定义逻辑。

内容的提问来源于stack exchange，提问作者Jonathan Lambert