DxTreeView Class

A TreeView component.

Assembly: DevExpress.Blazor.v20.2.dll

Declaration

public class DxTreeView :
    DxComponent<TreeViewComponentViewModel>,
    IDisposable

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.

Blazor Navigation Landing TreeView

Run Demo: TreeView

Add a TreeView to a Project

Follow the steps below to add the TreeView component to an application:

Use a DevExpress Project Template to create a new Blazor Server or Blazor WebAssembly application. If you use a Microsoft project template or already have a Blazor project, configure your project to incorporate DevExpress Blazor components.
Add the <DxTreeView>…</DxTreeView> markup to a Razor page.
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.

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.

Razor
Data Source

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

public class ChemicalElementGroup { 
  Lazy<List<ChemicalElementGroup>> groups = new Lazy<List<ChemicalElementGroup>>();

  public ChemicalElementGroup(string name, List<ChemicalElementGroup> groups = null) {
    Name = name;
    if (groups != null)
      Groups.AddRange(groups);
  }

  public string Name { get; set; }

  public List<ChemicalElementGroup> Groups { get { return groups.Value; } }
}

public static class ChemicalElements {
  private static readonly Lazy<List<ChemicalElementGroup>> chemicalElementGroups = new Lazy<List<ChemicalElementGroup>>(() => {
    List<ChemicalElementGroup> groups = new List<ChemicalElementGroup>() {
      new ChemicalElementGroup("Metals", new List<ChemicalElementGroup>() {
        new ChemicalElementGroup("Alkali metals"),
        new ChemicalElementGroup("Inner transition elements", new List<ChemicalElementGroup>() {
          new ChemicalElementGroup("Lanthanides"),
          new ChemicalElementGroup("Actinides")
        }),
      }),
      new ChemicalElementGroup("Nonmetals", new List<ChemicalElementGroup>() {
        new ChemicalElementGroup("Halogens"),
        new ChemicalElementGroup("Noble gases"),
      })
    };
    return groups;
  });

  public static List<ChemicalElementGroup> Groups { get { return chemicalElementGroups.Value; } }
}

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.

Run Demo: TreeView - Bind to Hierarchical Data

Run Demo: TreeView - Bind to Master-Detail Data

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.

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);
        }    
    }
}

Run Demo: TreeView - Node 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>

Note that you cannot operate with unloaded nodes in code (for instance, select an unloaded node, get node information, and so on).

Run Demo: TreeView - Load Child Nodes on Demand Mode

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");
    }
}

TreeView Templates