Treeview with columns in node

[Trent Ballew]

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/.

[Iliana Dyankova]

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

 

 

[Trent Ballew]

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.

[Iliana Dyankova]

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

 

 

[Trent Ballew]

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.

[Iliana Dyankova]

Hi Trent,

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

Regards,
Iliana Nikolova
Telerik

 

 

[Trent Ballew]

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.

[Iliana Dyankova]

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

 

 

[Trent Ballew]

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

[Shirish]

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

[Iliana Dyankova]

Hi Shirish,

You could find the code from the dojo attached.

Regards,
Iliana Nikolova
Telerik

 

 

[Shirish]

Thank you, I was able to download the file.