Chemical elements
Selected group: none
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:
- AllowSelectNodes — Controls whether nodes can be selected.
- SelectionChanged — Occurs after node selection.
- GetSelectedNodeInfo — Returns information about the currently selected node: name, text, etc.
Additionally, TreeView supports synchronization of the selected node with the path of the currently displayed page. To activate this feature, enable the AllowSelectNodes option and specify the NavigateUrl properties for required nodes. The left-hand navigation tree of this demo shows synchronization in action.
The TreeView component also supports keyboard navigation. Press the Tab key or Shift+Tab to focus the TreeView and use Arrow keys to navigate through nodes.
Chemical elements
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:
- Uses the TreeView's Data property to specify a data source.
- Adds the <DataMappings> tag to the component markup.
- 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.
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:
- Uses the TreeView's Data property to specify a data source.
- Adds the <DataMappings> tag to the component markup.
- 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 properties are required.
Selected employees:
Users can check TreeView nodes within the UI. This demo uses our TreeView component's Multiple check mode. When activated, checked node state for one node does not affect checked node state for a different node. Users cannot set the indeterminate state from the UI. Use the TreeViewNode.AllowCheck property or map DxTreeViewDataMappingBase.AllowCheck to a data field to disable check marks for a specific node.
This demo illustrates use of our TreeView component's Recursive check mode. When active, the component recursively checks a child node’s check state and those of parent nodes (whether they are allowed to be checked: the TreeViewNode.AllowCheck property is true. The parent node's CheckBox is checked if all child nodes are checked. Otherwise, the CheckBox will remain in an indeterminate state.
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.
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:
The TreeView component allows you to filter its nodes. Enable the ShowFilterPanel property to activate the search panel. If a user types in a search string, the component displays matching nodes. Use the FilterString property to specify the filter criteria in code. In this demo, the filter operation should start with at least 2 input symbols (specified by the FilterMinLength property). Specify the FilterMode property to choose how the TreeView component displays filtered nodes.