Customize treeview to contain positioned dom nodes

2 posts, 1 answers
  1. Roatin Marth
    Roatin Marth avatar
    65 posts
    Member since:
    Nov 2007

    Posted 13 Dec 2011 Link to this post

    Is it possible to customize the treeview to position additional DOM content to the far right of a tree node? We are hoping to use a "hover" state for the node to determine when to show/hide said DOM content.

    See the attached screenshot. Note the two little icons to the right of the hovered tree node. This is what I'm talking about.
  2. Answer
    Alex Gyoshev
    Alex Gyoshev avatar
    2527 posts

    Posted 15 Dec 2011 Link to this post

    Hello Roatin,

    It is possible. In order to achieve the scenario from the screenshot, the first thing you need is to make the treeview items take up the whole row:

    .k-treeview span.k-in {
        display: block;

    For the content on the right, you have two options for creating it:

    • on-the-fly, when an item is hovered
    • during initialization

    Depending on the size of your treeview, you can consider both of these approaches -- for larger treeviews, creating the content when the items are hovered is recommended, since it minimizes the markup on the page. Either way, you can attach a mouseenter and mouseleave event handlers to the .k-in elements, and show / hide the additional content.

    Best wishes,
    Alex Gyoshev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top