Treeview with columns in node

12 posts, 1 answers
  1. Trent Ballew
    Trent Ballew avatar
    14 posts
    Member since:
    Aug 2009

    Posted 12 Aug 2014 Link to this post

    I'd like to create a treeview with columns as part of the node template. Essentially, I have supplemental data that I want displayed along with the treeview so that the data lines up in columns after the initial node text.  I'm using the Kendo treeview because I need to be able to reorder the items easily using the drag and drop the treeview provides.

    I've tried many methods to position the additional data in columns using a Kendo treeview template, but regardless of what I try, the columns to the right of the node are always displayed relative to the node itself; I can't get them to line up.  A grid really isn't a good solution for me because I lose the drag and drop and it really isn't hierarchical in nature, anyway.  I've also tried displaying a grid next to the tree, but that causes tons if issues with sync'ing and lining up the rows, not to mention having to flatten the hierarchical dataset each time I refresh or make a change.

    Any ideas how I can create a treeview that has columnar data as part of the node template that aligns correctly?  Here's a jsFiddle with a couple examples of what I'm trying to do: http://jsfiddle.net/trentballew/oc9qsnyc/.
  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2592 posts

    Posted 14 Aug 2014 Link to this post

    Hi Trent,

    I am not quite sure if I understand correctly what the exact outcome should be - all single items (Item 1, Item 2, Item 3..., Benefits, Bob, Accounting etc.) should be on the same line. Could you please elaborate a bit more - this way I would be able to advice you further and provide concrete recommendations? Thank you in advance for your cooperation.

    Regards,
    Iliana Nikolova
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Trent Ballew
    Trent Ballew avatar
    14 posts
    Member since:
    Aug 2009

    Posted 14 Aug 2014 in reply to Iliana Nikolova Link to this post

    I came up with a workable solution, but it's not perfect.  I used a combinations of css positioning and tables and positioned each column differently based on which node level they were at (to adjust for the indentation of the tree node).  Here's my updated solution:

    http://jsfiddle.net/trentballew/oc9qsnyc/5/.
     
    Like I said, it's not perfect (and performs oddly in jsFiddle), but it is workable.  It would be nice if there were a way to format node text in columns or to at least easily calculate the amount of indent each node has.
  5. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2592 posts

    Posted 15 Aug 2014 Link to this post

    Hi Trent,

    Thank you for getting back to me. In order to display the node text in columns you can use the CSS display: inline-block property. For your convenience I prepared a simple example.

    Regards,
    Iliana Nikolova
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. Trent Ballew
    Trent Ballew avatar
    14 posts
    Member since:
    Aug 2009

    Posted 15 Aug 2014 in reply to Iliana Nikolova Link to this post

    Thanks for the reply, but your example has the same results as my initial post - the columns are not lined up.  I'm looking for a way to get them to line up using CSS.
  7. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2592 posts

    Posted 18 Aug 2014 Link to this post

    Hi Trent,

    I apologies for the overlook - here is the updated example which demonstrates a possible implementation.

    Regards,
    Iliana Nikolova
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  8. Trent Ballew
    Trent Ballew avatar
    14 posts
    Member since:
    Aug 2009

    Posted 19 Aug 2014 in reply to Iliana Nikolova Link to this post

    I appreciate the attempt, but your new solution does away with the tree nesting altogether and makes it look like a grid, not a tree.  This defeats the purpose of using the tree to manage the multiple levels in the first place. 

    The challenge (as you can see) is to retain the indention of the tree levels for the first column of the node but to make the other columns line up like a table.  Even more challenging is retaining the columns after you drag and drop one of the nodes to another level.
  9. Answer
    Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2592 posts

    Posted 20 Aug 2014 Link to this post

    Hi Trent,

    As a bit different approach for this scenario I would suggest to use a template with custom condition in it (updated example).

    Regards,
    Iliana Nikolova
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  10. Trent Ballew
    Trent Ballew avatar
    14 posts
    Member since:
    Aug 2009

    Posted 20 Aug 2014 in reply to Iliana Nikolova Link to this post

    That's it!  That is exactly what I was trying to do.

    Actually, it needed a bit of tweaking.  Your example was looking for specific values in the text of the item like "Accounting" or "marketing".  I modified it by looking at the rowLevel instead since I won't necessarily know the values in the database.  I also changed the CSS to add the appropriate margin instead of subtracting it​.

    Here's the updated snippet: http://dojo.telerik.com/IWuy/5.

    Thanks for all your help!

    Trent
  11. Shirish
    Shirish avatar
    2 posts
    Member since:
    Jun 2015

    Posted 26 Jun 2015 in reply to Iliana Nikolova Link to this post

    Hi Iliana,

     We have similar requirement and I was not able to load the example in dojo browser. Could you please upload the files in this post here.

    Thanks,

    Shirish

  12. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2592 posts

    Posted 30 Jun 2015 Link to this post

    Hi Shirish,

    You could find the code from the dojo attached.

    Regards,
    Iliana Nikolova
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  13. Shirish
    Shirish avatar
    2 posts
    Member since:
    Jun 2015

    Posted 30 Jun 2015 in reply to Iliana Nikolova Link to this post

    Thank you, I was able to download the file.
Back to Top
Kendo UI is VS 2017 Ready