DxTreeView Class

A TreeView component.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.dll

Declaration

public class DxTreeView :
    DxTreeViewBase

Remarks

The DevExpress TreeView component for Blazor (<DxTreeView>) displays hierarchical data structures within a tree-like UI. The component implements navigation within a web application.

NOTE

Online Demo: TreeView

Add TreeView to a Project

To add the <DxTreeView> component to an application, follow the steps below:

  1. Create and configure the application as described in the Create a New Blazor Application document.

  2. Add the <DxTreeView>...</DxTreeView> markup to your application.

  3. Configure the component (see the sections below).

Nodes / Unbound Mode

The <DxTreeView> component supports bound and unbound modes. In unbound mode, the user should populate a node hierarchy. Root nodes are stored within the TreeView's Nodes collection. Each node has its own collection of child nodes that can be accessed via its Nodes property.

A DxTreeViewNode class instance represents a node in code, and the Name property specifies its unique name. Use the Text property to specify the node's text, and the NavigateUrl property to specify the URL to navigate to when the node is clicked.

Blazor-TreeView-Nodes

<DxTreeView>
  <Nodes>
    <DxTreeViewNode Name="Overview" Text="Overview" NavigateUrl="https://demos.devexpress.com/blazor/" />
    <DxTreeViewNode Name="Editors" Text="Data Editors" Expanded="true">
      <Nodes>
        <DxTreeViewNode Text="Combobox" NavigateUrl="https://demos.devexpress.com/blazor/ComboBox" />
        <DxTreeViewNode Text="Spin Edit" NavigateUrl="https://demos.devexpress.com/blazor/SpinEdit" />
      </Nodes>
    </DxTreeViewNode>
    <DxTreeViewNode Name="FormLayout" Text="Form Layout" NavigateUrl="https://demos.devexpress.com/blazor/FormLayout" BadgeText="Upd" />
    <DxTreeViewNode Name="TreeView" Text="TreeView" NavigateUrl="https://demos.devexpress.com/blazor/TreeView" BadgeText="New"  />
    <DxTreeViewNode Name="Tabs" Text="Tabs" NavigateUrl="https://demos.devexpress.com/blazor/Tabs" Visible="false" BadgeText="New" />
  </Nodes>
</DxTreeView>

Bind to Data

The <DxTreeView> component supports binding to hierarchical data. In the bound mode, items from the data source automatically populate the <DxTreeView> nodes.

Use the Data property to specify a data source and the ChildrenExpression property to specify a lambda expression that returns a node’s children.

<DxTreeView Data="@ChemicalElements.Groups"
  TextExpression="@(dataItem => ((ChemicalElementGroup)dataItem).Name)"
  ChildrenExpression="@(dataItem => ((ChemicalElementGroup)dataItem).Groups)">
</DxTreeView>
NOTE

If you bind a <DxTreeView> component with a nonempty Nodes collection to a data source, unbound data is lost. Bound data overwrites all the nodes added to the Nodes collection.

Online Demos:

TreeView - Binding to Hierarchical Data

TreeView - Master-Detail Data Binding

The table below lists API members related to data binding.

Member

Description

NameExpression

Specifies an expression that returns a node’s name.

TextExpression

Specifies an expression that returns a node’s text.

IconCssClassExpression

Specifies an expression that returns the name of a CSS class applied to a node’s icon.

NavigateUrlExpression

Specifies an expression that returns a node’s target URL.

Expand/Collapse Nodes

Users can click a node or its Expand/Collapse button to expand/collapse the node. When node selection is enabled, users should double-click nodes or click the Expand/Collapse buttons.

Blazor-TreeView-Expand-Collapse-Buttons

The table below lists related API members.

Member

Description

NodeExpandCollapseAction

Specifies user actions that expand or collapse a node.

ShowExpandButtons

Specifies whether expand buttons are visible.

SetNodeExpanded(Func<ITreeViewNodeInfo, Boolean>, Boolean)

Expands or collapses the specified node.

GetNodeExpanded(Func<ITreeViewNodeInfo, Boolean>)

Returns whether the specified node is expanded.

ExpandToNode(Func<ITreeViewNodeInfo, Boolean>)

Expands the nodes down to the specified node.

ExpandAll()

Expands all nodes in the DxTreeView.

CollapseAll()

Collapses all nodes in the DxTreeView.

ExpandButtonIconCssClass

Specify a CSS class for the expand button's icon.

CollapseButtonIconCssClass

Specify a CSS class for the collapse button's icon.

The following events fire when a node's state changes:

Member

Description

BeforeExpand

Fires when a node is about to be expanded and allows you to cancel the action.

BeforeCollapse

Fires when a node is about to be collapsed and allows you to cancel the action.

AfterExpand

Fires after a node has been expanded.

AfterCollapse

Fires after a node has been collapsed.

Node Selection

Set the AllowSelectNodes property to true to enable node selection. Once a user clicks a node, it is highlighted and the SelectionChanged event is raised. The following example demonstrates how to handle this event to expand the selected node if it has children and collapse other nodes:

<DxTreeView @ref="@treeView" AllowSelectNodes="true" SelectionChanged="@SelectionChanged">
  ...
</DxTreeView>

@code  {
    DxTreeView treeView;

    protected void SelectionChanged(TreeViewNodeEventArgs e)  {
        treeView.CollapseAll();
        treeView.ExpandToNode((n) => n.Text == e.NodeInfo.Text);
        if (!e.NodeInfo.IsLeaf) {
          treeView.SetNodeExpanded((n) => n.Text == e.NodeInfo.Text, true);
        }    
    }
}
NOTE

Online Demo: TreeView - Selection

The table below lists other related API:

Member

Description

GetSelectedNodeInfo()

Returns information about the selected node.

SelectNode(Func<ITreeViewNodeInfo, Boolean>)

Selects the specified node.

ClearSelection()

Clears node selection.

Disable User Interactions

Set the Enabled property to false to ignore user interactions.

<button type="button" @onclick="@(() => ToggleTreeViewEnabled())">Enable/Disable TreeView</button>

<DxTreeView Enabled="@TreeViewEnabled">
    <Nodes>
        <DxTreeViewNode Text="Metals">
            <Nodes>
                <DxTreeViewNode Text="Alkali metals" />
                <DxTreeViewNode Text="Inner transition elements">
                    <Nodes>
                        <DxTreeViewNode Text="Lanthanides" />
                        <DxTreeViewNode Text="Actinides" />
                    </Nodes>
                </DxTreeViewNode>
            </Nodes>
        </DxTreeViewNode>
    </Nodes>
</DxTreeView>

@code  {
    bool TreeViewEnabled { get; set; } = false;

    void ToggleTreeViewEnabled() { TreeViewEnabled = !TreeViewEnabled; }
}

Load Child Nodes on Demand

When the LoadChildNodesOnDemand option is set to true, the component does not load child nodes until a parent node is expanded for the first time. This optimizes performance for complex hierarchical structures because the TreeView requests the required data from the data source.

You can load child nodes on demand in either bound or unbound modes. In bound mode, use the HasChildrenExpression property to specify a lambda expression that indicates whether the node has children.

<DxTreeView Data="@DataSource"
            LoadChildNodesOnDemand="true"
            HasChildrenExpression="@(dataItem => ((DateTimeGroup)dataItem).HasSubGroups)">
</DxTreeView>

Templates

Use the following <DxTreeView> properties to provide a common node template and a text template for all nodes:

In unbound mode, you can create node templates on an individual basis. These templates have a priority over common templates. Use the following <DxTreeViewNode> properties:

<DxTreeView @ref="@treeView"
            Data="@ComponentsData.ComponentSets"
            ChildrenExpression="@(dataItem => ((ComponentSet)dataItem).ComponentSets)">
    <NodeTemplate>
        @{
            var dataItem = (ComponentSet)context.DataItem;
        }
        @if (!context.IsLeaf)
        {
            <h4 class="my-0 p-2 d-flex align-items-center justify-content-between">
                <span class="mr-3">@dataItem.Title</span>
                <small class="@GetExpandButtonCssClass(dataItem)" style="top: 0px"></small>
            </h4>
        }
        else
        {
            <div class="media p-2">
                <img src="@dataItem.ImageUrl" class="bg-primary rounded mr-3" style="padding: 2px; width: 30px; height: 30px;" alt="@dataItem.Title" />
                <div class="media-body">
                    <h5 class="mt-0">@dataItem.Title</h5>
                    @dataItem.Description
                </div>
            </div>
        }
    </NodeTemplate>
</DxTreeView>

@code {
    DxTreeView treeView;

    string GetExpandButtonCssClass(ComponentSet nodeDataItem)
    {
        return String.Format("oi oi-chevron-{0}", treeView.GetNodeExpanded(n => n.DataItem == nodeDataItem) ? "bottom" : "right");
    }
}

Blazor-TreeView-Templates

NOTE

Online Demo: TreeView - Templates

Inheritance

Object
ComponentBase
DevExpress.Blazor.Internal.DxComponent
DevExpress.Blazor.Internal.DxComponent<DevExpress.Blazor.Navigation.Internal.TreeViewComponentViewModel>
DxTreeViewBase
DxTreeView
See Also