Skip to main content

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.

treeview-declaration.png