4

我正在寻找一个使用 kendo-grid Kendo for angular Grid for angular 的示例，并在所有单元格和标题上使用工具提示。

我发现他们有这个工具提示

编辑！！！！

我需要在模板中放入来自 dataItem 的字段（来自行）

我有这个模板，但 dataItem 不起作用

我错过了什么？

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

2 回答 2

3

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

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

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

编辑：

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

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

于 2018-07-29T13:05:15.827 回答
1

对于 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");

于 2019-08-18T07:43:08.270 回答