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

'kendoTooltip' selector in multiple 'kendo-grid' elements

2 Answers 615 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Fouad
Top achievements
Rank 1
Fouad asked on 21 Jan 2021, 04:23 PM

Hello, 

I have this example: 

https://stackblitz.com/edit/angular-te7dtt-8jnpsk?file=app%2Fapp.component.ts

It seems like kendoTooltip selector of TooltipDirective can only be declared once per view.

Let's say you have two <div> element. If you declare a kendoTooltip in each of those <div> elements, it will only work for the first grid. 

1- Is TooltipDirective static/singleton? cannot be instantiated multiple times?

2- How can you use kendoTooltip in multiple html elements so that TooltipDirective.show() can work on all those html elements, and not only the first one where kendoTooltip is declared? 

Thank you!

2 Answers, 1 is accepted

Sort by
0
Fouad
Top achievements
Rank 1
answered on 21 Jan 2021, 04:36 PM
Just an FYI, I'm using angular 9, and kendo-angular-tooltip 3.
0
Stefani
Telerik team
answered on 25 Jan 2021, 03:04 PM

Hi Fouad,

Thank you for the provided details!

To start with your first question, the TooltipDirective can be instantiated multiple times on different HTML elements. However, the @ViewChild directive looks only for the first element or directive matching the selector and is not cumulative for all elements meeting the requirements. Instead, the @ViewChildren directive can be used when there are multiple elements with one selector. The directive will return a QueryList of the target elements or directives from the view DOM. 

Here is a StackBlitz example that implements this approach:

https://stackblitz.com/edit/angular-te7dtt-nqd1xa

The query list could be processed in different ways. The available API for the QueryList can be found here

Another option would be to use Template reference variables to get different instances of all the tooltip directives. The following StackBlitz demonstrates how it could be done:

https://stackblitz.com/edit/angular-te7dtt-54y1vt

I hope this helps. Let me know if you need any further assistance!

Regards,
Stefani
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Grid
Asked by
Fouad
Top achievements
Rank 1
Answers by
Fouad
Top achievements
Rank 1
Stefani
Telerik team
Share this question
or