4

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>
Ovi
  • 2,459
  • 9
  • 50
  • 72

2 Answers2

3

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

SiliconSoul
  • 799
  • 4
  • 6
  • Perfect! Thank you – Ovi Jul 30 '18 at 05:17
  • I need to put in the tooltip template of a certain cell a field from the dataItem, not only the text in the cell, how can I do that ? – Ovi Aug 21 '18 at 11:01
  • can you please help me with my above question in the comment? – Ovi Aug 21 '18 at 11:33
  • Sorry, didn't have to time to look into this when you updated the question and then totally forgot about it. I updated my answer to show how to get the item. – SiliconSoul Sep 16 '18 at 06:46
  • Thank you! I also posted a question on Telerik's site and got a answer that also helped https://www.telerik.com/forums/grid-tooltip-in-angular-5-typescript#NvMhzKwE_k-QyGdGZLGUrQ – Ovi Sep 16 '18 at 10:38
  • Do you by any chance have any idea on how I can add a line break in the tooltip? – Ovi Sep 16 '18 at 10:41
  • Should be possible to do this in the template as in any other case: https://plnkr.co/edit/c3imQcsgZDOLZwe6dbAO?p=preview – SiliconSoul Sep 16 '18 at 10:48
1

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");
Prasanth Sankar
  • 56
  • 4