Add tooltip to tree node

4 posts, 1 answers
  1. Ran
    Ran avatar
    29 posts
    Member since:
    Apr 2015

    Posted 05 Jul Link to this post

    Hi,

    attached my example:

    http://dojo.telerik.com/@idoglik6/usIro

    What I'm trying to is to popup tooltip above the "x Recipients" which contains their names (the recipients names by the bind prop "recipients.email".)

    I already tried to pass the recipients array to the controller by -> #:item.recipents.email#, but it sent [Oblect, Object] .

    I need the real object and not the string format.

    Thanks,

    Ran

     

     

  2. Answer
    Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    353 posts

    Posted 06 Jul Link to this post

    Hi Ran,

    You can wrap the TreeView in a ToolTip, and then apply custom logic, involving the TreeView dataItem() method to configure the ToolTip content option. I have modified the provided dojo to illustrate the suggested approach:

    http://dojo.telerik.com/OgAqI/2

    You can find more information about the Kendo UI ToolTip in our documentation and demos:

    http://docs.telerik.com/kendo-ui/controls/layout/tooltip/overview

    http://docs.telerik.com/kendo-ui/api/javascript/ui/tooltip

    http://demos.telerik.com/kendo-ui/tooltip/index

    I hope this helps.

    Regards,
    Dimiter Topalov
    Telerik by Progress
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
  3. Kendo UI is VS 2017 Ready
  4. Ran
    Ran avatar
    29 posts
    Member since:
    Apr 2015

    Posted 06 Jul in reply to Dimiter Topalov Link to this post

    Thanks that was very helpful!

    One last thing, I want to display each recipient in separate line (new line)

    How can i do something like that?

    Ran

  5. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    353 posts

    Posted 08 Jul Link to this post

    Hi Ran,

    You can apply custom logic to manipulate the tooltip content before returning the final result, e.g.:

    content: function(e){
      // building result
    ...
    return result.join('<br />');
    }
    ...

    http://dojo.telerik.com/OgAqI/3

    Regards,
    Dimiter Topalov
    Telerik by Progress
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
Back to Top
Kendo UI is VS 2017 Ready