
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/.
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
0
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
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.
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
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
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
Hi Trent,
I apologies for the overlook - here is the updated example which demonstrates a possible implementation.
Regards,
Iliana Nikolova
Telerik
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.
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
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
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
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
Hi Shirish,
You could find the code from the dojo attached.
Regards,
Iliana Nikolova
Telerik
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.