Tooltip for future elements

[Dan]

I have an application with a grid where the delete button is an icon and a tooltip has to be associated with it.

jQuery("#childrenGrid").kendoTooltip({"filter":".k-grid-delete","content":"Delete"}

The grid is with remote data and the tooltip does not show. If the grid uses not remote data the tooltip appears.

Can I make this work?

[Dan]

I tried to reproduce the problem with a dojo but could not and investigate the issue and found the problem.

My grid has also a code like this: grid.setOptions({ scrollable: true }) and it seems that this not only destroys the grid but also the tooltip. Is this function as design to destroy all the widget associated with the grid? Can't the code destroy only the widgets associated with the grid and leave the rest?

[Ivan Danchev]

Hello Dan,

The Grid's setOptions method destroys the element the Tooltip is shown for. For that reason you need to initialize it when the elements with ".k-grid-delete" class are rendered, for example in the Grid's dataBound event handler:
​

function onDataBound(e) {
  $("#grid").kendoTooltip({"filter":".k-grid-delete","content":"Delete"})
}

Regards,
Ivan Danchev
Progress Telerik

[Dan]

Hi Ivan,

Unfortunately I am using Telerik ASP.NET MVC and the tooltip is created on the server. So the configuration of the tooltip is not known when the databound function is called.

[Ivan Danchev]

Hi Dan,

If the configuration is known at a later point than the Grid's dataBound event, initialize it when it becomes available, but make sure you re-initialize after destroying and recreating the Grid.

Regards,
Ivan Danchev
Progress Telerik

[Dan]

Hi Ivan,

What I meant by not known at the databound was that the script files are separated than the cshtml file and the text of the file is taken from resources (because it needs to be translated into different languages).

Anyway I attached the tooltip not to the grid but to the parent of the grid.

However my question remains: Can't the code destroy only the widgets associated with the grid and leave the rest?

[Ivan Danchev]

Hi Dan,

The Grid's setOptions destroys the Grid itself and the button being part of the Grid is also destroyed. Other widgets on the page will not be affected. The problem is the Tooltip needs the target element to exist by the time it is initialized. This can be illustrated with this simple example. By the time the Tooltip is initialized, its target ("btn-wrapper") is not rendered, so even if you add it later by clicking "add button to container", the Tooltip will not show for the Delete button. If however btn-wrapper is present before the Tooltip is initialized (uncomment the line in the document.ready handler) it will show as expected.
I hope this explains the widget behavior and the scenarios in which it won't show as expected.

Regards,
Ivan Danchev
Progress Telerik

[Dan]

Hi Ivan,

So should I understand that the tooltip even though is generated for the grid (jQuery("#childrenGrid").kendoTooltip) the target of the widget are all the buttons? Then how come when I added the tooltip to the parent of the grid the tooltip appeared on all the delete buttons even after I added a new row or when I moved to a different page or even when after I used the setOptions? According to your explanation I should have to recreate the tooltip on the parent of the grid because its target (the delete buttons) were destroyed.

[Ivan Danchev]

Hi Dan,

The buttons you show the Tooltip for are current targets - you hover a button and it becomes target. These elements may not exist when the Tooltip is initialized and it will still be shown if you add them at a later point and hover them. They are specified through the filter option, e.g.,:

filter: ".k-grid-delete",

The container (of the elements passed to the filter option) is the one that has to exist when the Tooltip is initialized:

("#parentGrid").kendoTooltip

That is why it works in the example you have given: when the container is the parent Grid changes to elements within it (child grid, buttons) will not prevent the Tooltip from showing, as long as the container ("#parentGrid") is not destroyed.


Regards,
Ivan Danchev
Progress Telerik

[Dan]

Hi Ivan,

Perhaps I do not understand destroy. Doesn't destroy refers only to the widget and not the DOM element? If that is true my question remains why the grid widget destroys all the widgets when the logic would be to destroy only the widgets that the grid widget created.

[Ivan Danchev]

Hello Dan,

Since the Tooltip is initialized from the Grid's element it is considered a child widget to the Grid. As such its own destroy method is called when the Grid's destroy method is executed (See Destroying Widgets Overview section of the documentation for more details). If you don't want this to happen initialize the Tooltip from a container element in which the Grid is nested:

<div id="container">
  <div id="grid"></div>
</div>

$("#container").kendoTooltip({
  filter: ".k-grid-delete",
  content: "Delete"
});

Regards,
Ivan Danchev
Progress Telerik