Grid ToolTip in Angular 5 Typescript

[Paul]

Is there an example of adding tooltips to a select set of columns in a grid in angular 5? All of the examples I have seen are for jquery or older versions of angular without typescript. 

[Dimiter Topalov]

Hello Paul,

A dedicated Tooltip component is currently not available in the Kendo UI for Angular suite, but it is on our roadmap:

https://www.telerik.com/kendo-angular-ui-develop/roadmap/

Meanwhile you can introduce some custom solution, based on utilizing the Grid header and cell templates, a Popup component and its "anchor" property. 

You can handle the regular HTML5 mouseenter and mouseleave events of the respective element(s) you would like to show a tooltip for, and customize the Popup's content accordingly.

Here is a sample implementation of the described approach using a Kendo UI for Angular Popup component as a tooltip over the Grid header cell text:

http://plnkr.co/edit/PxpUXA3FEx9PaP62JXo6?p=preview

A more straight-forward (but with limited functionality) approach would be to use the Grid templates to render elements and provide a title attribute to hold the desired text that will be displayed in the built-in HTML tooltip when the element is hovered:

http://plnkr.co/edit/xMlnlGC2K9bXfCK1lSFL?p=preview

Same goes for creating tooltips for the elements in the Grid cell templates.

 

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik

[Rumeth]

Dimiter,

The sortChange event doesn't trigger when clicking on the span while using the template.

<ng-template kendoGridHeaderTemplate let-column let-columnIndex="columnIndex">
    <span title="CUSTOM TOOLTIP">{{column.field}}({{columnIndex}})</span>
</ng-template>

Clicking outside the span triggers the event.

Is there a way to add the title attribute to the Header?

Regards,

Rumeth

[Dimiter Topalov]

Hi Rumeth,

The described undesired behavior is caused by the fact that we leave handling click events over custom elements within templates in the hands of the developer so that they can introduce some custom logic for their templates (when necessary).

The most straight-forward approach for propagating the click event when the target is the span element within the header template, would be to handle the click event and click the parent element programmatically to trigger the built-in sorting functionality, e.g.:

http://plnkr.co/edit/87iIbSzEaUahvoAeHBti?p=preview

Adding the "title" attribute to the header cell directly is unfortunately not possible (barring some JavaScript hacks that involve manipulating the DOM directly) as there is no API providing direct access to these Grid elements.

Regards,
Dimiter Topalov
Progress Telerik

[Rumeth]

Dimiter,

Thank you for the patch.

Still, it would be nice if there was support for the default tooltip via title attribute in the grid.

Regards,
Rumeth

[Dimiter Topalov]

Hi Rumeth,

Indeed, it would have been nice the Grid columns to have such a setting, but due to the complexity of the widget and its rendering due to all its built-in functionalities, many of them related to utilizing the header cells in a specific manner, as well as the support for header cell templates, currently the Grid does not provide the API for a tooltip/title configuration (the title property is used to set the title of the respective column only).

If you have the time, please submit a feature request to our UserVoice portal, describing the desired enhancement:

http://kendoui-feedback.telerik.com/forums/555517-kendo-ui-for-angular-feedback?category_id=181393

This helps us estimate the customer demand for certain features and enhancements and prioritize accordingly when updating our roadmap. Thank you in advance.

Regards,
Dimiter Topalov
Progress Telerik

[Rumeth]

Dimiter,

If no tooltip/title can be defined, then the given title should at least be set as the tooltip for the Headers and the given field data should be set for the cells by default.

There is already a request for this feature here.

I will be voting this up.

Regards,
Rumeth

[Dimiter Topalov]

Hello Rumeth,

Thank you for your feedback and involvement. We will consider the discussed enhancement, if it gains enough popularity in the UserVoice portal.

Regards,
Dimiter Topalov
Progress Telerik

[Paul]

I was able to accomplish it using angular material tool tip and a cell template...

 

<ng-template kendoGridCellTemplate let-dataItem>
    <span class="cellToolTip" matTooltip={{dataItem.tradeInstruction}}>{{dataItem.tradeInstruction}}</span>
</ng-template>

[Dimiter Topalov]

Hello Paul,

Thank you for sharing your solution with the community. I am glad to inform you that a dedicated Tooltip component is now in final stages of development and will be soon available too. It will provide yet another alternative for displaying custom information when hovering various elements.

Regards,
Dimiter Topalov
Progress Telerik

[Sangeetha]

Is there any Kendo Tooltip for Angular5?

[Dimiter Topalov]

Hello Sangeetha,

I am glad to inform you that the Tooltip component was recently released. You can find the respective documentation on our site:

https://www.telerik.com/kendo-angular-ui-develop/components/tooltip/#toc-tooltip-overview

Regards,
Dimiter Topalov
Progress Telerik

[Sangeetha]

Thanks, Dimiter.

Also, the close icon seems to be missing. 

For making it visible, is there anything else I have to do?

[Sangeetha]

I wanted to open a tooltip on the click of a Kendo grid data cell and need to show a grid inside the tooltip as ng template in angular5.

Referring your examples not giving a good solution for my problem. Can you please help on this?

 

[Svet]

Hi Sangeetha,

The simplest way would be to use the [showOn] input property of the Tooltip component. However, as the component is still released just as a development version, this feature is still not available. This is why, for now we could utilize the (cellClick) event of the grid so that once we click a cell we can open programmatically the tooltip via its toggle method. Check the following example demonstrating this approach:

https://stackblitz.com/edit/kendo-ui-extensions-7mjpw2

I hope this helps.

Regards,
Svetlin
Progress Telerik

[Sangeetha]

 Svetlin.

[Sunil]

This solution -  http://plnkr.co/edit/PxpUXA3FEx9PaP62JXo6?p=preview works in Chrome but doesn't work in IE 11 and Edge. 

[Svet]

Hi Sunil,

The Tooltip component is already available in the Kendo Ui for Angular suite. Check it at the following article:
https://www.telerik.com/kendo-angular-ui/components/tooltip/

The following example demonstrates, how to use it within a grid for all column cells. The tooltip will be opened on click as specified by its showOn property:
https://stackblitz.com/edit/angular-3yujdm-ysw73w?file=app%2Fapp.component.ts

I hope this helps.

Regards,
Svetlin
Progress Telerik

[Michal]

Hi Svetlin,

I am trying to use your example https://stackblitz.com/edit/angular-3yujdm-ysw73w?file=app%2Fapp.component.ts

Do you have any idea why am I getting this error: There is no directive with "exportAs" set to "kendoTooltip" ("<div kendoTooltip [ERROR ->]#tooltip="kendoTooltip" filter='th' [tooltipTemplate]="template">?

[Hadas]

Hi,

I am using The following example within a grid.
https://stackblitz.com/edit/angular-3yujdm-ysw73w?file=app%2Fapp.component.ts

But I need to show in the tooltip not  "anchor.nativeElement.innerText" but some another field from the dataitem..

Is that possible?

Thanks

[Svet]

Hi Michal,

Make sure that the TooltipModule is imported in app.module.ts file as demonstrated in the stack blitz example. 

Hi Hadas,

By default, the tooltip displays the value assigned to the title input property of the particular element. This is why, for the purpose we will no longer need the template for the tooltip. Rather we will use a template for the column cells, where we will display the required information in a span and will set the title of the span to contain the text for the tooltip. Check the following example demonstrating this approach:
https://stackblitz.com/edit/angular-3yujdm-eqvgqg?file=app/app.component.ts

The important parts are marked in red below:

<div kendoTooltip #tooltip="kendoTooltip" [showOn]="'click'" filter='td span'>
  <kendo-grid [data]="gridData" [height]="410">
      <kendo-grid-column field="ProductID" title="ID" width="40" [title]="dataItem?.ProductID">
        <ng-template kendoGridCellTemplate let-dataItem>
          <span [title]="dataItem.ProductName">{{dataItem.ProductID}}</span>
        </ng-template>
      </kendo-grid-column>
      <kendo-grid-column field="ProductName" title="Name" width="250">
        <ng-template kendoGridCellTemplate let-dataItem>
          <span [title]="dataItem.ProductID">{{dataItem.ProductName}}</span>
        </ng-template>
      </kendo-grid-column>
  </kendo-grid>
</div>

I hope this helps.

On a side note, I would like to ask you to open separate threads for issues or concerns not directly related to the initial topic. This will help us to keep a cleaner history of your accounts, maintain straight to the point forum threads and provide a better support service in general. Thank you in advance.

Regards,
Svetlin
Progress Telerik

[Hadas]

Perfect!

Thanks

[Hadas]

Hi,

Is it possible to add a line break in the tooltip?

Thanks

[Hadas]

Hi

When I have a long tooltip in my title is it possible to add a line break without using ng-template?

[Svet]

Hi Hadas,

I would kindly ask you to open a new thread for this case as the discussion has significantly deviated from the original topic of the current thread. Thank you in advance.

Regards,
Svetlin
Progress Telerik