Node Selection

The DevExpress TreeView for Blazor displays hierarchical data structures within a tree-like UI. The component can be used to simplify navigation within a web app or to display self-referenced information to end-users.

A collection of TreeView nodes is populated by the Nodes parameter. For each node, you can also specify its child nodes (using the parent node’s Nodes parameter), unique identifier, text, target URL, and so on.

The TreeView allows users to select a node with a mouse click. The selected node is automatically highlighted. The following API is related to the node selection:

Additionally, TreeView supports synchronization of a node selection with the path of the currently displayed page. The left-hand navigation tree of this demo shows the mentioned feature in action.*

* You can find the navigation TreeView’s source code in the NavMenu.razor file within the DevExpress Blazor GitHub repository.

Binding to Hierarchical Data

You can bind the DevExpress TreeView to hierarchical data structures. This demo demonstrates how to bind the TreeView to the collection of ChemicalElementGroup objects. Each object can have child objects.

The code above does the following:

  1. Uses the TreeView's Data property to specify a data source.
  2. Adds the <DataMappings> tag to the component markup.
  3. Creates the DxTreeViewDataMapping instance and maps node properties to data source fields. Mappings are used to adjust the TreeView's data model to the data source. For hierarchical data, the Children property is required.

Binding to Flat Data

You can populate the DevExpress TreeView's nodes with data from a source. This demo demonstrates how to bind the TreeView to the collection of flat data items.

The code above does the following:

  1. Uses the TreeView's Data property to specify a data source.
  2. Adds the <DataMappings> tag to the component markup.
  3. Creates the DxTreeViewDataMapping instance and maps node properties to data source fields. Mappings are used to adjust the TreeView's data model to the data source. For flat data, the Key and ParentKey property is required.

Load Child Nodes on Demand Mode

In this mode, the DevExpress TreeView component loads a node’s children when the node is expanded for the first time. This mode allows you to improve the TreeView’s performance for tree structures with a large number of nodes.

You can use the "Load Child Nodes on Demand" mode for bound and unbound TreeView nodes. To activate this mode, set the LoadChildNodesOnDemand property to true. In the bound mode, specify the DxTreeViewDataMapppingBase.HasChildren property that indicates whether a node has child nodes. The TreeView uses this property to render nodes before they are expanded for the first time.

Templates

The DevExpress TreeView component for Blazor allows you to define custom templates for its nodes.

Use the following DxTreeView properties to specify 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: