Kendo for Angular Grid with tooltip

Question

I am looking for a example for using kendo-grid Kendo for angular Grid for angular with tooltip on all cells and header.

I found they have this tooltip

EDIT!!!!

I need to put in the template a field from the dataItem (from the row)

I have this template but the dataItem doesnt work

What am I missing?

 <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

It is not clear what you want to show in the tooltip but generally you can just add the tooltip directive to the grid and set a filter for the cells:

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

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

Edit:

They don't seem to have API to get the dataItem from the element but they seem to render the item index on the row and I was able to use it to get the dataItem for the anchor. Also, the filter input of the tooltip seems to conflict with the filter input of the grid so the tooltip should be initialized on a parent element:

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

Answer 2

For kendo MVC we use javascript like this for tooltip

   $("#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");