TreeView
- 2 minutes to read
TreeView represents a navigation control that displays a hierarchical collection of labeled items.
To learn more about TreeView and see it in action, refer to its online demos.
#Implementation Details
TreeView is realized by the TreeViewExtension class. Its instance can be accessed via the ExtensionsFactory.TreeView helper method, which is used to add a TreeView extension to a view. This method’s parameter provides access to the TreeView‘s settings implemented by the TreeViewSettings class, allowing you to fully customize the extension.
TreeView‘s client counterpart is represented by the MVCxClientTreeView object.
#Declaration
TreeView can be added to a view in the following manner.
View code (ASPX):
<%
Html.DevExpress().TreeView(
settings =>
{
settings.Name = "treeView";
settings.Width = 300;
settings.AllowCheckNodes = true;
var node = settings.Nodes.Add("Home");
var subNode = node.Nodes.Add("News");
subNode.Nodes.Add("For Developers");
subNode.Nodes.Add("Website news");
node.Nodes.Add("Our Mission");
node.Nodes.Add("Our Customers");
node = settings.Nodes.Add("Support");
node.Nodes.Add("Knowledge Base");
node.Nodes.Add("Documentation");
node.Nodes.Add("Support Center");
settings.PreRender = (source, e) => {
ASPxTreeView treeView = (ASPxTreeView)source;
treeView.ExpandToDepth(0);
};
})
.Render();
%>
View code (Razor):
@Html.DevExpress().TreeView(
settings =>
{
settings.Name = "treeView";
settings.Width = 300;
settings.AllowCheckNodes = true;
var node = settings.Nodes.Add("Home");
var subNode = node.Nodes.Add("News");
subNode.Nodes.Add("For Developers");
subNode.Nodes.Add("Website news");
node.Nodes.Add("Our Mission");
node.Nodes.Add("Our Customers");
node = settings.Nodes.Add("Support");
node.Nodes.Add("Knowledge Base");
node.Nodes.Add("Documentation");
node.Nodes.Add("Support Center");
settings.PreRender = (source, e) => {
ASPxTreeView treeView = (ASPxTreeView)source;
treeView.ExpandToDepth(0);
};
}).GetHtml()
Note
The Partial View should contain only the extension’s code.
The code result is demonstrated by the image below.