I am looking how to render Treeview with unlimited child node, but I can not find any one using this model:
public class TopicTree
{
public int Id { get; set; }
public int ParentId { get; set; }
public string Name { get; set; }
public ObservableCollection<TopicTree> ChildTopics { get; set; }
public TopicTree()
{
ChildTopics = new ObservableCollection<TopicTree>();
}
public TopicTree(
int idValue,
int parentId = 0,
string name = "")
: this()
{
Id = idValue;
ParentId = parentId;
Name = name;
}
}
MenuFor is able to render a "static" nested structure composed of <ul> and <li> elemnts, that you can give the appearence of a dropdown menu, didebar menu, treeView, by providing adequate css.
TreeViewFor is a complex TreeView where nodes can be edited, moved from a brancch to another, and so on.
MenuFor is quitre light, so if you don't need the functionalities of the TreeView it is better to use it.
In both cases you just need to supply a
"Node Template" that specifies what is here:
<li>
......templated is inserted here in all nodes.....
<ul>
....childrem
</ul>
</li>
this means that all recursion and children handlinh is performed automatically by the control
jsiahaan
Contributor
2324 Points
597 Posts
How to render TreeView with unlimited node using the attached model
Apr 29, 2012 09:19 AM|LINK
Hi all,
I am looking how to render Treeview with unlimited child node, but I can not find any one using this model:
public class TopicTree { public int Id { get; set; } public int ParentId { get; set; } public string Name { get; set; } public ObservableCollection<TopicTree> ChildTopics { get; set; } public TopicTree() { ChildTopics = new ObservableCollection<TopicTree>(); } public TopicTree( int idValue, int parentId = 0, string name = "") : this() { Id = idValue; ParentId = parentId; Name = name; } }Please help me.
Indonesian Humanitarian Foundation
francesco ab...
All-Star
20912 Points
3279 Posts
Re: How to render TreeView with unlimited node using the attached model
Apr 29, 2012 12:09 PM|LINK
Yu must use a recursive call someway.
Either you build an HtmlHelper that calls a recursive function, or implement a PartialView that call itself within a for loop on all each children.
In the Mvc Controls Toolkit I have two controls you can use to render tree-like structure:
MenuFor and TreeViewFor
MenuFor is able to render a "static" nested structure composed of <ul> and <li> elemnts, that you can give the appearence of a dropdown menu, didebar menu, treeView, by providing adequate css.
TreeViewFor is a complex TreeView where nodes can be edited, moved from a brancch to another, and so on.
MenuFor is quitre light, so if you don't need the functionalities of the TreeView it is better to use it.
In both cases you just need to supply a "Node Template" that specifies what is here:
<li>
......templated is inserted here in all nodes.....
<ul>
....childrem
</ul>
</li>
this means that all recursion and children handlinh is performed automatically by the control
Mvc Controls Toolkit | Data Moving Plug-in Videos
jsiahaan
Contributor
2324 Points
597 Posts
Re: How to render TreeView with unlimited node using the attached model
Apr 29, 2012 01:50 PM|LINK
Hi Francesco
Thank you very much. Let me try the link and come back to this thread then.
Regards
Indonesian Humanitarian Foundation