TreeView - 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 etc.

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.

Selected group: none

TreeView - Binding to Hierarchical Data

The DevExpress TreeView supports binding to hierarchical data structures. A bound TreeView creates a node for each data item.

The following properties should be specified to bind TreeView to a hierarchical data structure:

  • Data - A TreeView data source object.
  • ChildrenExpression - A lambda expression that returns the data item’s children.

The following properties specify expressions that return node information (text, name, and etc.):

TreeView - Master-Detail Data Binding

The DevExpress TreeView for Blazor allows you to load data from several data sources and display the master-detail relationships within the component.

This demo module binds the TreeView to three data sources and populates component nodes as follows:

  • First-level nodes are bound to an array of ProductCategoryMain items via the component's Data property.
  • Second-level nodes are obtained from the second data source. Each node is represented by the ProductCategory object and depends on a parent value (the corresponding first-level node).
  • Third-level nodes are obtained from the third data source. Each node is represented by the Product object based on a master-detail relationship between the second and third data sources. This relationship is established through the ProductCategory.ProductSubcategoryID and Product.ProductCategoryId properties.

TreeView - Load Child Nodes on Demand ModeNew

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" for bound and unbound TreeView nodes.

The following API members are related to this mode:

TreeView - Templates

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

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: