Treelines ?

8 posts, 0 answers
  1. RichardAD
    RichardAD avatar
    105 posts
    Member since:
    Feb 2012

    Posted 28 Mar 2012 Link to this post

    Does anyone have an example or css specifiers for making the TreeView show treelines ?

    Something to do with k-first, k-in, k-last perhaps

    Thanks
    Richard
  2. Adrian
    Adrian avatar
    1 posts
    Member since:
    Dec 2011

    Posted 30 Mar 2012 Link to this post

    Because the padding attribute of .k-item only partial lines are possible. Not exactly what I've got in mind but maybe useful too.

    #treeview .k-item  {
         border-bottom: 1px solid black;
    }
     
    #treeview .k-group  {
         border-top: 1px solid black;
    }
     
    #treeview .k-last  {
         border-bottom: none;
    }
  3. Kendo UI is VS 2017 Ready
  4. Francisco
    Francisco avatar
    7 posts
    Member since:
    Aug 2011

    Posted 30 Aug 2012 Link to this post

    Is it possible to have a tree view with tree lines like on my attachment?
  5. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 04 Sep 2012 Link to this post

    Hello all,

    See the following jsBin example on how to achieve this effect.

    Greetings,
    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!
  6. Francisco
    Francisco avatar
    7 posts
    Member since:
    Aug 2011

    Posted 04 Sep 2012 Link to this post

    Thanks for your response, it works!

    The only issue is this example is building the treeview using jquery, but the style looks like does not work if I build the treeview on my view using razor. Any idea?

    In the worse case scenario I guess I can build the treeview using jquery instead but I would be nice to know how to fix the issue.

    Regards!
  7. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 05 Sep 2012 Link to this post

    Hello Francisco,

    I believe the server-side code does not render the k-treeview-lines class. The following script will add it:

        $(".k-treeview > .k-group").addClass("k-treeview-lines");

    Regards,
    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!
  8. Francisco
    Francisco avatar
    7 posts
    Member since:
    Aug 2011

    Posted 05 Sep 2012 Link to this post

    Thank you so much!
  9. Richard Hyde
    Richard Hyde avatar
    3 posts
    Member since:
    Nov 2009

    Posted 12 Nov 2012 Link to this post


    This solution works fine for IE 9+. Anyone got this working in IE8?
Back to Top
Kendo UI is VS 2017 Ready