This is a migrated thread and some comments may be shown as answers.

Treeview with columns in node

11 Answers 225 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Trent Ballew
Top achievements
Rank 1
Trent Ballew asked on 12 Aug 2014, 07:02 PM
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/.

11 Answers, 1 is accepted

Sort by
0
Iliana Nikolova
Telerik team
answered on 14 Aug 2014, 08:41 AM
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!
 
0
Trent Ballew
Top achievements
Rank 1
answered on 14 Aug 2014, 04:09 PM
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.
0
Iliana Nikolova
Telerik team
answered on 15 Aug 2014, 08:07 AM
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!
 
0
Trent Ballew
Top achievements
Rank 1
answered on 15 Aug 2014, 01:48 PM
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.
0
Iliana Nikolova
Telerik team
answered on 18 Aug 2014, 01:50 PM
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!
 
0
Trent Ballew
Top achievements
Rank 1
answered on 19 Aug 2014, 06:31 PM
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.
0
Accepted
Iliana Nikolova
Telerik team
answered on 20 Aug 2014, 11:03 AM
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!
 
0
Trent Ballew
Top achievements
Rank 1
answered on 20 Aug 2014, 10:38 PM
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
0
Shirish
Top achievements
Rank 1
answered on 26 Jun 2015, 06:18 PM

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

0
Iliana Nikolova
Telerik team
answered on 30 Jun 2015, 01:19 PM
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!
 
0
Shirish
Top achievements
Rank 1
answered on 30 Jun 2015, 01:23 PM
Thank you, I was able to download the file.
Tags
TreeView
Asked by
Trent Ballew
Top achievements
Rank 1
Answers by
Iliana Nikolova
Telerik team
Trent Ballew
Top achievements
Rank 1
Shirish
Top achievements
Rank 1
Share this question
or