This is a migrated thread and some comments may be shown as answers.

Grid ToolTip in Angular 5 Typescript

24 Answers 646 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Paul
Top achievements
Rank 1
Paul asked on 18 Jan 2018, 09:12 PM
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. 

24 Answers, 1 is accepted

Sort by
0
Accepted
Dimiter Topalov
Telerik team
answered on 19 Jan 2018, 06:43 AM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Rumeth
Top achievements
Rank 1
answered on 14 Mar 2018, 06:47 AM

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

0
Dimiter Topalov
Telerik team
answered on 14 Mar 2018, 07:29 AM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Rumeth
Top achievements
Rank 1
answered on 14 Mar 2018, 08:39 AM

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

0
Dimiter Topalov
Telerik team
answered on 16 Mar 2018, 06:20 AM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Rumeth
Top achievements
Rank 1
answered on 16 Mar 2018, 06:44 AM

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

0
Dimiter Topalov
Telerik team
answered on 19 Mar 2018, 09:26 AM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Paul
Top achievements
Rank 1
answered on 19 Mar 2018, 01:44 PM

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>

0
Dimiter Topalov
Telerik team
answered on 21 Mar 2018, 06:50 AM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Sangeetha
Top achievements
Rank 1
answered on 02 May 2018, 11:51 AM
Is there any Kendo Tooltip for Angular5?
0
Dimiter Topalov
Telerik team
answered on 02 May 2018, 12:16 PM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Sangeetha
Top achievements
Rank 1
answered on 02 May 2018, 01:03 PM

Thanks, Dimiter.

Also, the close icon seems to be missing. 

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

0
Sangeetha
Top achievements
Rank 1
answered on 02 May 2018, 06:03 PM

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?

 

0
Svet
Telerik team
answered on 03 May 2018, 12:27 PM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Sangeetha
Top achievements
Rank 1
answered on 03 May 2018, 01:36 PM

 Svetlin.

0
Sunil
Top achievements
Rank 1
answered on 20 Aug 2018, 02:51 PM

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

0
Svet
Telerik team
answered on 22 Aug 2018, 09:07 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Michal
Top achievements
Rank 1
answered on 03 Sep 2018, 12:02 PM

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">?

0
Hadas
Top achievements
Rank 1
answered on 04 Sep 2018, 08:59 AM

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

0
Svet
Telerik team
answered on 05 Sep 2018, 06:30 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Hadas
Top achievements
Rank 1
answered on 05 Sep 2018, 06:49 AM

Perfect!

Thanks

0
Hadas
Top achievements
Rank 1
answered on 16 Sep 2018, 10:43 AM

Hi,

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

Thanks

0
Hadas
Top achievements
Rank 1
answered on 17 Sep 2018, 05:19 AM

Hi

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

0
Svet
Telerik team
answered on 18 Sep 2018, 09:03 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
General Discussions
Asked by
Paul
Top achievements
Rank 1
Answers by
Dimiter Topalov
Telerik team
Rumeth
Top achievements
Rank 1
Paul
Top achievements
Rank 1
Sangeetha
Top achievements
Rank 1
Svet
Telerik team
Sunil
Top achievements
Rank 1
Michal
Top achievements
Rank 1
Hadas
Top achievements
Rank 1
Share this question
or