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.

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

<dx:BootstrapTreeView runat="server" AllowSelectNode="true">
    <Nodes>
        ...
    </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.

<dx:BootstrapTreeView runat="server" EnableCallBacks="true">
    <Nodes>
        ...
    </Nodes>
</dx:BootstrapTreeView>

Hide Expand Buttons

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

<dx:BootstrapTreeView runat="server" ShowExpandButtons="false">
    <Nodes>
        ...
    </Nodes>
</dx:BootstrapTreeView>

Auto PostBack

The Auto Postback feature allows the TreeView control to automatically initiate a postback when an end-user clicks a node, which enables you to process the node click on the server side by handling the NodeClick event. Set the AutoPostBack property to true to enable this feature.

<dx:BootstrapTreeView ID="TreeViewAutoPostBack" runat="server" AutoPostBack="true" OnNodeClick="TreeViewAutoPostBack_NodeClick">
    <Nodes>
        ...
    </Nodes>
</dx:BootstrapTreeView>

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.

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

<dx:BootstrapTreeView ID="TreeViewVirtual" runat="server" EnableCallBacks="true" OnVirtualModeCreateChildren="treeView_VirtualModeCreateChildren">
</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.

Trace Events:
<dx:BootstrapTreeView runat="server">
    <ClientSideEvents
        Init="onInit"
        NodeClick="onNodeClick"
        ExpandedChanging="onExpandedChanging"
        ExpandedChanged="onExpandedChanged" />
    <Nodes>
        ...
    </Nodes>
</dx:BootstrapTreeView>
Screen Size
Color Themes
Demo QR Code