TreeView

• Jul 09, 2021
• 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):

C#

<% 
    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):

C#

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