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:
- AllowSelectNodes - Controls whether or not nodes can be selected.
- SelectionChanged - Occurs after node selection.
- GetSelectedNodeInfo - Returns information about the currently selected node: name, text and etc.
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.*
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.):
- TextExpression - A lambda expression that returns the node’s text.
- NameExpression - A lambda expression that returns the node’s unique identifier (name).
- IconCssClassExpression - A lambda expression that returns the name of a CSS class applied to the node’s icon.
- NavigateUrlExpression - A lambda expression that returns the node’s target URL.
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.
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):
- DxTreeViewNode properties (templates that are applied to a specific node):