Default TreeView
The Tree View is a control used to display hierarchical data in tree-like form. Each Tree View node is represented by a BootstrapTreeViewNode object and provides access to a collection of its sub-nodes through the Nodes collection property.
The client NodeClick and server NodeClick events occur when an end-user clicks a Tree View node.
<dx:BootstrapTreeView runat="server">
<Nodes>
<dx:BootstrapTreeViewNode Text="Home" Expanded="true">
<Nodes>
<dx:BootstrapTreeViewNode Text="News">
<Nodes>
<dx:BootstrapTreeViewNode Text="For Developers">
</dx:BootstrapTreeViewNode>
<dx:BootstrapTreeViewNode Text="Website news">
</dx:BootstrapTreeViewNode>
</Nodes>
</dx:BootstrapTreeViewNode>
<dx:BootstrapTreeViewNode Text="Our Mission">
</dx:BootstrapTreeViewNode>
</Nodes>
</dx:BootstrapTreeViewNode>
<dx:BootstrapTreeViewNode Text="Products">
<Nodes>
<dx:BootstrapTreeViewNode Text="Subscriptions / Packs">
</dx:BootstrapTreeViewNode>
<dx:BootstrapTreeViewNode Text=".NET Windows Forms Components">
</dx:BootstrapTreeViewNode>
</Nodes>
</dx:BootstrapTreeViewNode>
<dx:BootstrapTreeViewNode Text="Support">
<Nodes>
<dx:BootstrapTreeViewNode Text="Knowledge Base">
</dx:BootstrapTreeViewNode>
<dx:BootstrapTreeViewNode Text="Documentation">
</dx:BootstrapTreeViewNode>
</Nodes>
</dx:BootstrapTreeViewNode>
</Nodes>
</dx:BootstrapTreeView>
Nodes Selection
The Tree View control supports selection of nodes with a mouse click. To allow node selection, set the control's AllowSelectNodes property to true. Note that only one node can be selected at a time.
Handle the client ItemClick or server ItemClick event 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 property.
<dx:BootstrapTreeView runat="server" AllowSelectNode="true">
<Nodes>
<dx:BootstrapTreeViewNode Text="Home" Expanded="true">
<Nodes>
<dx:BootstrapTreeViewNode Text="News">
</dx:BootstrapTreeViewNode>
<dx:BootstrapTreeViewNode Text="Our Mission">
</dx:BootstrapTreeViewNode>
</Nodes>
</dx:BootstrapTreeViewNode>
<dx:BootstrapTreeViewNode Text="Products" Expanded="true">
<Nodes>
<dx:BootstrapTreeViewNode Text="Subscriptions / Packs">
</dx:BootstrapTreeViewNode>
<dx:BootstrapTreeViewNode Text=".NET Windows Forms Components">
</dx:BootstrapTreeViewNode>
</Nodes>
</dx:BootstrapTreeViewNode>
</Nodes>
</dx:BootstrapTreeView>
Load Nodes on Callbacks
The Tree View control can obtain its node from the server as needed using callbacks. When this mode is activated, the contents of collapsed nodes are not present on the client until these nodes are expanded. To specify whether to use the callback technology to transfer node data to from server, use the EnableCallBacks property.
Note that in this demo the callback time is intentionally extended so that the loading indicator is visible during callbacks.
<dx:BootstrapTreeView runat="server" EnableCallBacks="true">
<Nodes>
<dx:BootstrapTreeViewNode Text="Home">
<Nodes>
<dx:BootstrapTreeViewNode Text="News">
<Nodes>
<dx:BootstrapTreeViewNode Text="For Developers">
</dx:BootstrapTreeViewNode>
<dx:BootstrapTreeViewNode Text="Website news">
</dx:BootstrapTreeViewNode>
</Nodes>
</dx:BootstrapTreeViewNode>
<dx:BootstrapTreeViewNode Text="Our Mission">
</dx:BootstrapTreeViewNode>
</Nodes>
</dx:BootstrapTreeViewNode>
<dx:BootstrapTreeViewNode Text="Products">
<Nodes>
<dx:BootstrapTreeViewNode Text="Subscriptions / Packs">
</dx:BootstrapTreeViewNode>
<dx:BootstrapTreeViewNode Text=".NET Windows Forms Components">
</dx:BootstrapTreeViewNode>
</Nodes>
</dx:BootstrapTreeViewNode>
</Nodes>
</dx:BootstrapTreeView>
You can control whether to display the Tree View's Hide (-) and Expand (+) buttons using the ShowExpandButtons property.
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 e.cancel to the true value in your event handler.
<dx:BootstrapTreeView runat="server" ShowExpandButtons="false">
<Nodes>
<dx:BootstrapTreeViewNode Text="Home" Expanded="true">
<Nodes>
<dx:BootstrapTreeViewNode Text="News" Expanded="true">
<Nodes>
<dx:BootstrapTreeViewNode Text="For Developers">
</dx:BootstrapTreeViewNode>
<dx:BootstrapTreeViewNode Text="Website news">
</dx:BootstrapTreeViewNode>
</Nodes>
</dx:BootstrapTreeViewNode>
<dx:BootstrapTreeViewNode Text="Our Mission">
</dx:BootstrapTreeViewNode>
</Nodes>
</dx:BootstrapTreeViewNode>
<dx:BootstrapTreeViewNode Text="Products" Expanded="true">
<Nodes>
<dx:BootstrapTreeViewNode Text="Subscriptions / Packs">
</dx:BootstrapTreeViewNode>
<dx:BootstrapTreeViewNode Text=".NET Windows Forms Components">
</dx:BootstrapTreeViewNode>
</Nodes>
</dx:BootstrapTreeViewNode>
</Nodes>
</dx:BootstrapTreeView>
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 property does not affect templated nodes.
<dx:BootstrapTreeView runat="server" ShowExpandButtons="false">
<Nodes>
<dx:BootstrapTreeViewNode Text="Inbox" Expanded="true">
<Badge Text="10" />
<Nodes>
<dx:BootstrapTreeViewNode Text="Work">
<Badge Text="8" />
</dx:BootstrapTreeViewNode>
<dx:BootstrapTreeViewNode Text="Personal" />
<dx:BootstrapTreeViewNode Text="Other">
<Badge Text="2" />
</dx:BootstrapTreeViewNode>
</Nodes>
</dx:BootstrapTreeViewNode>
<dx:BootstrapTreeViewNode Text="Sent Items" />
<dx:BootstrapTreeViewNode Text="Drafts">
<Badge Text="1" />
</dx:BootstrapTreeViewNode>
<dx:BootstrapTreeViewNode Text="Spam">
<Badge Text="3" />
</dx:BootstrapTreeViewNode>
</Nodes>
<ClientSideEvents NodeClick="onNodeWithBadgeClick" />
</dx:BootstrapTreeView>
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) || "");
}
}
}
Auto PostBack
The Auto Postback feature allows the TreeView control to automatically initiate a postback when an end-user clicks or expands/collapses a node. Set the AutoPostBack property to true to enable this feature.
Use the NodeClick event to process the node click on the server side. Also, you can process the expand/collapse actions on the server side via the ExpandedChanging and ExpandedChanged events.
<dx:BootstrapTreeView ID="TreeViewAutoPostBack" runat="server" AutoPostBack="true" OnNodeClick="TreeViewAutoPostBack_NodeClick">
<Nodes>
<dx:BootstrapTreeViewNode Text="Home" Expanded="true">
<Nodes>
<dx:BootstrapTreeViewNode Text="News">
</dx:BootstrapTreeViewNode>
<dx:BootstrapTreeViewNode Text="Our Mission">
</dx:BootstrapTreeViewNode>
</Nodes>
</dx:BootstrapTreeViewNode>
<dx:BootstrapTreeViewNode Text="Products" Expanded="true">
<Nodes>
<dx:BootstrapTreeViewNode Text="Subscriptions / Packs">
</dx:BootstrapTreeViewNode>
<dx:BootstrapTreeViewNode Text=".NET Windows Forms Components">
</dx:BootstrapTreeViewNode>
</Nodes>
</dx:BootstrapTreeViewNode>
</Nodes>
</dx:BootstrapTreeView>
protected void TreeViewAutoPostBack_NodeClick(object source, DevExpress.Web.Bootstrap.BootstrapTreeViewNodeEventArgs e) {
DemoUtils.ShowToast(AutoPostBack, string.Format("The '{0}' node has been clicked.", e.Node.Text));
}
Data Binding
The Tree View control supports binding to a data source, which can be any object that implements the IHierarchicalEnumerable or IHierarchicalDataSource interface (e.g., SiteMapDataSource, XmlDataSource, etc.). Set the DataSourceID property to assign a data source to a Tree View.
A data-bound Tree View automatically creates a node for each data item. A created node obtains values for its properties from data item attributes with matching names. You can also explicitly specify mappings between node properties and names of data item attributes using the following properties.
- IconCssClassField - Specifies the name of a data field providing CSS classes of icons displayed by Tree View nodes.
- NameField - Specifies the name of a data field providing unique identifiers to nodes.
- NavigateUrlField - Specifies the name of a data field providing node navigation locations.
- TextField - Specifies the name of a data field providing node display texts.
- ToolTipField - Specifies the name of a data field providing node tooltip texts.
You can modify settings of each auto-created Node object during data binding in the NodeDataBound event.
<dx:BootstrapTreeView runat="server" TextField="Title" DataSourceID="TreeViewDataSource">
</dx:BootstrapTreeView>
<asp:XmlDataSource ID="TreeViewDataSource" runat="server" DataFile="~/App_Data/HelpNav.xml" XPath="/namespace/*">
</asp:XmlDataSource>
Virtual Mode
When the Tree View control is functioning in Virtual mode, child nodes are created and initialized only when their parent node is expanded. To activate the Virtual mode, handle the Tree View's VirtualModeCreateChildren event, which occurs when expanding a parent node for the first time. In the event handler, programmatically create a list of BootstrapTreeViewVirtualNode objects representing child nodes for the currently expanded node. For each created node that has no children, set the IsLeaf property to true so that the node does not display the expand button.
Note that in this demo the callback time is intentionally extended so that the loading indicator is visible during callbacks.
<dx:BootstrapTreeView ID="TreeViewVirtual" runat="server" EnableCallBacks="true" OnVirtualModeCreateChildren="treeView_VirtualModeCreateChildren">
</dx:BootstrapTreeView>
protected void treeView_VirtualModeCreateChildren(object sender, BootstrapTreeViewVirtualModeCreateChildrenEventArgs e) {
var path = string.IsNullOrEmpty(e.NodeName) ? Page.MapPath("~/") : e.NodeName;
var directory = new DirectoryInfo(path);
if(directory.Exists) {
e.Children = directory.GetFileSystemInfos()
.Where(i => !i.Name.StartsWith("app_", StringComparison.CurrentCultureIgnoreCase))
.Where(i => !i.Name.Equals("bin", StringComparison.CurrentCultureIgnoreCase))
.Select(i => new BootstrapTreeViewVirtualNode(i.FullName, i.Name) {
IsLeaf = i is FileInfo
})
.OrderBy(n => n.IsLeaf)
.ToList();
}
}
Templates
The Tree View control supports templates 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 properties to specify templates.
BootstrapTreeView properties:
- NodeTemplate - Specifies a common template used for displaying all nodes' content in the current tree view control.
- NodeTextTemplate - Specifies a common template used for displaying all nodes' text content in the current tree view control.
BootstrapTreeViewNode properties:
- Template - Specifies a template used for displaying the current node's content.
- TextTemplate - Specifies a template used for displaying the current node's text content.
<dx:BootstrapTreeView runat="server">
<NodeTextTemplate>
<div class="d-flex">
<div class="me-3">
<span class="fa fa-circle"></span>
</div>
<div>
<h5><%# Container.Node.Text %></h5>
<p class="text-justify">
DevExpress <%# Container.Node.Text + " " + (Container.Node.Parent.Name == "UIControls"
? (Container.Node.Name == "MVC" ? "Extensions" : "Controls and Libraries")
: "") %> for the .NET Framework.
</p>
</div>
</div>
</NodeTextTemplate>
<Nodes>
<dx:BootstrapTreeViewNode Name="UIControls" Text=".NET Controls" Expanded="true">
<TextTemplate>
<h4><%# Eval("Text") %></h4>
</TextTemplate>
<Nodes>
<dx:BootstrapTreeViewNode Name="WIN" Text="WinForms">
</dx:BootstrapTreeViewNode>
<dx:BootstrapTreeViewNode Name="ASP" Text="ASP.NET">
</dx:BootstrapTreeViewNode>
<dx:BootstrapTreeViewNode Name="MVC" Text="ASP.NET MVC" >
</dx:BootstrapTreeViewNode>
<dx:BootstrapTreeViewNode Name="WPF" Text="WPF" >
</dx:BootstrapTreeViewNode>
</Nodes>
</dx:BootstrapTreeViewNode>
<dx:BootstrapTreeViewNode Name="CrossPlatform" Text="Cross Platform">
<TextTemplate>
<h4><%# Eval("Text") %></h4>
</TextTemplate>
<Nodes>
<dx:BootstrapTreeViewNode Name="Reporting" Text="Reporting" >
</dx:BootstrapTreeViewNode>
<dx:BootstrapTreeViewNode Name="DocumentServer" Text="Document Server" >
</dx:BootstrapTreeViewNode>
</Nodes>
</dx:BootstrapTreeViewNode>
</Nodes>
</dx:BootstrapTreeView>
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.
- NodeClick - Fires when an end-user clicks a TreeView node.
- ExpandedChanging - Fires before the expansion state of a node is changed. Allows to cancel this operation or force processing the event on the server side.
- ExpandedChanged - Fires after the expansion state of a node is changed.
<dx:BootstrapTreeView runat="server">
<ClientSideEvents
Init="onInit"
NodeClick="onNodeClick"
ExpandedChanging="onExpandedChanging"
ExpandedChanged="onExpandedChanged" />
<Nodes>
<dx:BootstrapTreeViewNode Text="Home" Expanded="true">
<Nodes>
<dx:BootstrapTreeViewNode Text="News">
<Nodes>
<dx:BootstrapTreeViewNode Text="For Developers">
</dx:BootstrapTreeViewNode>
<dx:BootstrapTreeViewNode Text="Website news">
</dx:BootstrapTreeViewNode>
</Nodes>
</dx:BootstrapTreeViewNode>
<dx:BootstrapTreeViewNode Text="Our Mission">
</dx:BootstrapTreeViewNode>
</Nodes>
</dx:BootstrapTreeViewNode>
<dx:BootstrapTreeViewNode Text="Products">
<Nodes>
<dx:BootstrapTreeViewNode Text="Subscriptions / Packs">
</dx:BootstrapTreeViewNode>
<dx:BootstrapTreeViewNode Text=".NET Windows Forms Components">
</dx:BootstrapTreeViewNode>
</Nodes>
</dx:BootstrapTreeViewNode>
<dx:BootstrapTreeViewNode Text="Support">
<Nodes>
<dx:BootstrapTreeViewNode Text="Knowledge Base">
</dx:BootstrapTreeViewNode>
<dx:BootstrapTreeViewNode Text="Documentation">
</dx:BootstrapTreeViewNode>
</Nodes>
</dx:BootstrapTreeViewNode>
</Nodes>
</dx:BootstrapTreeView>
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');
}
Client-Side Functionality
The Tree View control offers an advanced client-side API allowing you to manipulate the control and its elements.
The EnableClientSideAPI property specifies whether or not the client-side API is available. Note that the client-side API is automatically enabled if the ClientInstanceName property is specified or any client-side event available through the ClientSideEvents property is handled.
This demo allows you to interactively explore capabilities of the Tree View control's client-side API.
<dx:BootstrapTreeView ClientInstanceName="treeView" AllowSelectNode="true" runat="server">
<Nodes>
<dx:BootstrapTreeViewNode Text="Node 1" Expanded="true">
<Nodes>
<dx:BootstrapTreeViewNode Text="Child Node 1"></dx:BootstrapTreeViewNode>
<dx:BootstrapTreeViewNode Text="Child Node 2"></dx:BootstrapTreeViewNode>
<dx:BootstrapTreeViewNode Text="Child Node 3"></dx:BootstrapTreeViewNode>
</Nodes>
</dx:BootstrapTreeViewNode>
<dx:BootstrapTreeViewNode Text="Node 2" IconCssClass="fa fa-cogs">
<Nodes>
<dx:BootstrapTreeViewNode Text="Child Node 1"></dx:BootstrapTreeViewNode>
</Nodes>
</dx:BootstrapTreeViewNode>
<dx:BootstrapTreeViewNode Text="Node 3">
<Nodes>
<dx:BootstrapTreeViewNode Text="Child Node 1"></dx:BootstrapTreeViewNode>
</Nodes>
</dx:BootstrapTreeViewNode>
</Nodes>
</dx:BootstrapTreeView>