Tooltip for Kendo UI Grid using AngularJS

[SK]

Hi,

    I am looking for any example on how to show the Tooltip for a Kendo UI Grid column cell using the AngularJS. I saw many examples of this in the regular jQuery mode. I'm particularly interested in the AngularJS sample.

 Thanks,

SK

[Peter Filipov]

Hi,

Please review the following example, it shows how to handle the described case.

Regards,
Peter Filipov
Telerik

 

 

[SK]

Thanks Peter. I am seeing the Tooltip now, but running into a small issue. I am showing contents from a " Kendo Editor" control into a Grid (Cell). The Tooltip is needed to show the content of the first grid cell. The example you provided does the work sort of. When the content of the grid cell is large, it extends beyond the tooltip area (width and height). Is there a way I can resize the Tooltip dimension dynamically or at least when the content is beyond certain length. Thanks in advance.

 

Thanks,

SK

 

[SK]

Peter,

       Thanks for the sample. I am looking for a way to dynamically set the height / width of the Tooltip depending on the content size.    How can I achieve that?

       Second question, I noticed that tooltip size seems to get fixed depending on the first content you are displaying and subsequent rendering of the tooltip uses the same width irrespective of the content. How can I prevent this.

 

Thanks,

SK

[Peter Filipov]

Hello,

By default the size of the tooltip is determined by its content e.g. here. Could you please send me a sample in dojo where I could observe the described issue? I have updated the sample to show case how to set different width on the tooltip.

Regards,
Peter Filipov
Telerik

 

 

[Swetha]

Hi,

I am using kendo-2014.1.416 library. The sample example that you have provided is not working to show a tooltip for a specific column's cells in grid. KendoUI using AngularJs.

Regards,

Swetha Pullur

[Ianko]

Hello Swetha,

Typically, it is suggested to use the latest possible version of Kendo UI. This way you get bug fixes, new features and improvements. Also, note that the the versions supported are the ones published after a major release. 

I was unable to exactly test with 2014.1.416. So, I tested with 2014.2.716. Where the Grid appears to have different rendering and this line is throwing an error: var grid = e.target.closest(".k-grid").getKendoGrid();.

In order to resolve, you should ensure that the Grid instance is properly returned. So, using code like this one should resolve the issue: var grid = e.target.closest("[data-role='grid']").data("kendoGrid");. Here you are a new Dojo: http://dojo.telerik.com/arISu.

Regards,
Ianko
Telerik by Progress