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.SubcategoryID and Product.ProductCategoryId properties.
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:
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: