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 - TemplatesNew

You can use templates in the DevExpress TreeView component for Blazor to customize TreeView nodes. The templates allow you to specify a node’s text, content, and appearance. A template can be applied to all TreeView nodes or a specific node.

Use the following properties to specify TreeView templates:

  • DxTreeView properties (templates that are applied to all nodes):
    • NodeTemplate – Specifies a common template for all TreeView nodes' content.
    • NodeTextTemplate – Specifies a common template for all TreeView nodes' text.
  • DxTreeViewNode properties (templates that are applied to a specific node):
    • Template – Specifies a template for the corresponding node's content.
    • TextTemplate – Specifies a template for the corresponding node's text.