[Solved] Unpredictable Heirarchy

[Joni]

Hi,

I am working on a project where we need to display a heirarchy of treenodes which will represent domain objects. It is a case management system, and the domain object Case (the root of the tree) will be able to have any number of domain objects underneath it (except for another case).

There will be no restrictions on how objects are added. They case be added as children to the case, and as children to each other. So there won't be a nice, neat pre-ordained heirarchy whereby all level 1 nodes are X, level 2 Y, level 3 Z. It will be possible to have X, Y and Z at any of those 3 levels and any can be children of the others. The only node that can't be a child note is the root.

So, think of a picture of a binary search tree with a whole bunch of coloured nodes. Some branches will go 2 levels deep. Some may go 8 levels deep. Imagine that there are 4 colours representing objects of particular types. And then imagine that there is no pattern to the colours of the nodes. Any node can be any colour (except the root< which we'll say is Blue).

Drag and drop functionality is required. So, one node could be detached from its current parent and attached to a different node as a child.

Can you please advise (using pseudo code) how I could go about implementing that. The only thing I can see in the examples which might work is building up a Sitemap in the Controller and binding that. Not sure if Drag and drop would work with that implementation.
I think it would be better to manually build up the TreeViewNodes in the Controller and somehow bind that to the tree.

Let me know if you'd like me to kick off a support ticket for this.

Thanks!

[Alex Gyoshev]

Hi Joni,

If you need to dynamically reorder the nodes with JavaScript (apart from user drag&drop), it's currently not supported but you can vote for the following issue: Client-side API for adding/removing nodes. If you generate the tree structure on the server, this would not be a problem (just as you have guessed, a hierarchy of TreeViewNodes). Other than that, you need to decide how you would like to present the colors -- whether by an image/sprite or as CSS styles of each item.

If you need any specific help with the implementation, let us know.

All the best,
Alex Gyoshev
the Telerik team

[Joni]

Thanks Alex,

But what markup would I need to put in the cshtml file? I've looked at you examples and they all expect a pre-ordained structure e.g. 1 level of nodes, or 3 levels of nodes.

How would you write the razor if you just wanted to pass back a TreeView node, with a whole heirarchy of nodes as its child?
Note: that is different to an IEnumerable of nodes, which is flat.

[Alex Gyoshev]

Hi Joni,

You need to pass an IEnumerable<TreeViewItemModel>, since you may have more than one root node (this might not be your case, but as you understand, it is quite common). So, assuming that you are generating a hierarchy of TreeViewItemModel objects on the server:

var model = new List<TreeViewItemModel>() {
    new TreeViewItemModel() {
        Text = "root node",
        Items = new List<TreeViewItemModel>() {
            new TreeViewItemModel() { Text = "child 1" },
            new TreeViewItemModel() { Text = "child 2",
                Items = new List<TreeViewItemModel>() {
                    new TreeViewItemModel() { Text = "child 2.1" }
                }
            }
        }
    }
};

You can bind to it with the following razor code:

@(Html.Telerik().TreeView()
    .Name("TreeView")
    .BindTo(Model, mappings => {
        mappings.For<TreeViewItemModel>(binding =>
            binding
                .ItemDataBound((item, node) => {
                    item.Text = node.Text;
                })
                .Children(node => node.Items)
        );
    })
)

As you might have guessed, there isn't a BindTo() overload that is targeted at TreeViewItemModel nodes. We decided that it requires too much effort on your side, so we implemented the overload in the attached build (and all upcoming ones). Enjoy!

@(Html.Telerik().TreeView()
    .Name("TreeView2")
    .BindTo(Model)
)

Kind regards,
Alex Gyoshev
the Telerik team

[Joni]

Thanks Alex. I'll try that out and let you know how I go.