Kendo for Angular 带工具提示的网格

Question

我正在寻找使用 kendo-grid Kendo for angular Grid for angular with tooltip on all cells and header.

的示例

我发现他们有这个tooltip

编辑!!!!

我需要在模板中放入数据项（来自行）的一个字段

我有这个模板，但数据项不起作用

我错过了什么？

 <ng-template #template let-anchor let-dataItem>
    {{dataItem.NAME}}
    <span *ngIf="anchor.nativeElement.textContent.length > 0">{{ anchor.nativeElement.textContent + dataItem.NAME}}  </span>
</ng-template>

Answer 1

不清楚你想在工具提示中显示什么，但通常你可以将工具提示指令添加到网格并为单元格设置过滤器：

<kendo-grid [data]="gridData" [height]="410" 
    kendoTooltip filter="td, th" [tooltipTemplate]="template">

https://plnkr.co/edit/448cL6c5iCK76rgXf8GW?p=preview

编辑：

他们似乎没有 API 从元素中获取 dataItem，但他们似乎在行上呈现项目索引，我能够使用它来获取锚点的 dataItem。此外，工具提示的过滤器输入似乎与网格的过滤器输入冲突，因此工具提示应在父元素上初始化：

https://plnkr.co/edit/9OmHXgDkcMprgw3oso3D?p=preview

Answer 2

对于 kendo MVC，我们使用 javascript 这样的工具提示

   $("#GridName").kendoTooltip({
        filter: "th", //this filter selects all th and td cells
        position: "top",
        // apply additional custom logic to display the text of the relevant element only
        content: function (e) {
            var cell = $(e.target);
            var content = cell.text();
            return content;
        }
    }).data("kendoTooltip");