Default TreeView

The Tree View control displays hierarchical data in tree-like form.

Use the Tree View control's Nodes method to populate the collection of root nodes. A node's Nodes method allows you to declare sub-nodes.

@(Html.DevExpress()
    .BootstrapTreeView("Tree")
    .Nodes(nodes => {
        nodes.Add()
            .Text("Home")
            .Expanded(true)
            .Nodes(childNodes => {
                childNodes.Add().Text("News")
                    .Nodes(innerNodes => {
                        innerNodes.Add().Text("For Developers");
                        innerNodes.Add().Text("Website news");
                    });
                childNodes.Add().Text("Our Mission");
            });
        ...
    })
)

Nodes Selection

The Tree View control supports selection of nodes with a mouse click. To allow node selection, call the control’s AllowSelectNodes method with true parameter. Note that only one node can be selected at a time.

Tree View control's method:

Client Tree View control's method:

Handle the client ItemClick to detect a selection change. You can identify the clicked item by the value of its Name property.

Moreover, the Tree View control can automatically select an item for a current page. You can control this behavior using the SyncSelectionMode method.

@(Html.DevExpress()
    .BootstrapTreeView("TreeNodeSelection")
    .AllowSelectNode(true)
    .Nodes(nodes => {
        ...
    })
)

Hide Expand Buttons

You can control whether to display the Tree View’s Hide (-) and Expand (+) buttons using the ShowExpandButtons method.

Collapsing and expanding actions will remain available for end-users via a mouse double click. To prevent these actions, subscribe to the client-side ExpandedChanging event and set the e.cancel parameter to true in your event handler.

@(Html.DevExpress()
    .BootstrapTreeView("TreeHideExpandButton")
    .ShowExpandButtons(false)
    .Nodes(nodes => {
        ...
    })
)

Badges

The TreeView can display supplementary information for any node within a badge. A badge can display a text, an icon or both. Use the following API to configure badges on the server side:

The methods listed below allow you to manipulate badges on the client:

Note that the BootstrapTreeViewNode.Badge method does not affect templated nodes.

@(Html.DevExpress()
    .BootstrapTreeView("TreeBadges")
    .Nodes(nodes => {
        nodes.Add()
            .Text("Inbox")
            .Expanded(true)
            .Nodes(childNodes => {
                childNodes.Add()
                    .Text("Work")
                    .Badge(badge => badge.Text("8"));
                childNodes.Add().Text("Personal");
                childNodes.Add()
                    .Text("Other")
                    .Badge(badge => badge.Text("2"));
            });
        nodes.Add().Text("Sent Items");
        nodes.Add()
            .Text("Drafts")
            .Badge(badge => badge.Text("1"));
        nodes.Add()
            .Text("Spam")
            .Badge(badge => badge.Text("3"));
    })
)
function onNodeWithBadgeClick(s, e) {
    var node = e.node;
    var emailsCount = parseInt(node.GetBadgeText());
    if (!isNaN(emailsCount) && !node.GetNodeCount()) {
        node.SetBadgeText("");
        if (node.parent) {
            var inboxCount = parseInt(node.parent.GetBadgeText());
            if (!isNaN(inboxCount))
                node.parent.SetBadgeText((inboxCount - emailsCount) || "");
        }
    }
}

Templates

The Tree View control supports templates technology allowing you to customize control appearance and layout. You can define templates for a node's text or the entire node content. A template can be applied to all nodes (using control level templates) or a specific node (using node level templates). Use the following methods to specify templates.

Tree View methods:

TreeView node methods:

@(Html.DevExpress()
    .BootstrapTreeView("TemplatesTreeView")
    .NodeTextTemplate(t => @<text>
                <div class="media">
                    <div class="mr-3">
                        <span class="fa fa-circle"></span>
                    </div>
                    <div class="media-body">
                        <h5>@t.Node.Text</h5>
                        <p class="text-justify">
                            DevExpress @t.Node.Text @(t.Node.Parent.Name == "UIControls"
                                ? (t.Node.Name == "MVC" ? "Extensions" : "Controls and Libraries")
                                : "") for the .NET Framework.
                        </p>
                    </div>
                </div>
    </text>)
    .Nodes(nodes => {
        nodes.Add()
            .Name("UIControls")
            .TextTemplate(t => @<text>
                <h4>.NET Controls</h4>
                </text>)
            .Expanded(true)
            .Nodes(childNodes => {
                ...
            });
        nodes.Add()
            .Name("CrossPlatform")
            .TextTemplate(t => @<text>
                <h4>Cross Platform</h4>
                </text>)
            .Nodes(childNodes => {
                ...
            });
    })
    
)

Client-Side Events

This demo illustrates the capabilities of the Tree View control's client events and allows you to specify which client-side events you want to track. Interact with the Tree View interface to see the information about all tracked events raised in response to your actions in the event log.

The node.name property of the event handler's parameter allows you to identify the node for which an event has been raised.

Trace Events:
<script type="text/javascript">
    function onInit(s, e) {
        dxbsDemo.eventMonitor.trace(s, e, 'Init');
    }
    function onNodeClick(s, e) {
        dxbsDemo.eventMonitor.trace(s, e, 'NodeClick');
    }
    function onExpandedChanging(s, e) {
        dxbsDemo.eventMonitor.trace(s, e, 'ExpandedChanging');
    }
    function onExpandedChanged(s, e) {
        dxbsDemo.eventMonitor.trace(s, e, 'ExpandedChanged');
    }
</script>
@(Html.DevExpress()
    .BootstrapTreeView("TreeClientSideEvents")
    .ClientSideEvents(events => {
        events.Init("onInit");
        events.NodeClick("onNodeClick");
        events.ExpandedChanging("onExpandedChanging");
        events.ExpandedChanged("onExpandedChanged");
    })
    .Nodes(nodes => {
        ...
    })
)

Client-Side Functionality

The Tree View control offers an advanced client-side API allowing you to manipulate the control and its elements.

The EnableClientSideAPI method specifies whether or not the client-side API is available. Note that the client-side API is automatically enabled if the ClientInstanceName method has been called is specified or any client-side event available through the ClientSideEvents method is handled.

This demo allows you to interactively explore capabilities of the Tree View control's client-side API.

BootstrapClientTreeView methods:

BootstrapClientTreeViewNode methods:

@(Html.DevExpress()
    .BootstrapTreeView("treeViewControl")
    .EnableClientSideAPI(true)
    .AllowSelectNode(true)
    ...
    
)
Screen Size
Color Themes
Demo QR Code