kendo-gridangular5kendo-ui-angular2kendo-tooltip

Kendo for Angular Grid with tooltip


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>

Solution

  • 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