Blazorise TreeView component
The TreeView
component is a graphical control element that presents a hierarchical view of information.
The TreeView component is a powerful and flexible way to display hierarchical data in a tree-like structure. It allows users to navigate through the tree and perform actions on the nodes, such as expanding or collapsing them, selecting them, or performing other operations.
Features
- Display hierarchical data in a tree structure.
- Expand or collapse nodes.
- Select single or multiple nodes (depending on the selection mode).
- Customize the appearance of the nodes using templates.
- Perform actions on the nodes, such as deleting them or performing some other operation.
Installation
To install the Blazorise TreeView component, run the following command in the Package Manager Console:
Install-Package Blazorise.TreeView
Alternatively, you can install the package using the .NET Core CLI:
dotnet add package Blazorise.TreeView
Configuration
Once the package is installed, you need to configure your Blazor project to use the TreeView component.
In your main _Imports.razor add:
@using Blazorise.TreeView
Static files
Include CSS link into yourindex.html
or _Layout.cshtml
/ _Host.cshtml
file, depending if you’re using a Blazor WebAssembly or Blazor Server side project.
<link href="_content/Blazorise.TreeView/blazorise.treeview.css" rel="stylesheet" />
Basic example
A basic TreeView that aims to reproduce standard tree-view behavior.<TreeView Nodes="Items" GetChildNodes="@(item => item.Children)" HasChildNodes="@(item => item.Children?.Any() == true)" @bind-SelectedNode="selectedNode" @bind-ExpandedNodes="expandedNodes"> <NodeContent> <Icon Name="IconName.Folder" /> @context.Text </NodeContent> </TreeView>
@code{ public class Item { public string Text { get; set; } public IEnumerable<Item> Children { get; set; } } IEnumerable<Item> Items = new[] { new Item { Text = "Item 1" }, new Item { Text = "Item 2", Children = new [] { new Item { Text = "Item 2.1" }, new Item { Text = "Item 2.2", Children = new [] { new Item { Text = "Item 2.2.1" }, new Item { Text = "Item 2.2.2" }, new Item { Text = "Item 2.2.3" }, new Item { Text = "Item 2.2.4" } } }, new Item { Text = "Item 2.3" }, new Item { Text = "Item 2.4" } } }, new Item { Text = "Item 3" }, }; IList<Item> expandedNodes = new List<Item>(); Item selectedNode; }
Expanding and Collapsing Nodes
By default, all nodes are collapsed except for the root node(s). To expand a node, click on the triangle icon next to its label. To collapse a node, click on the triangle icon again. You can also programmatically expand or collapse nodes using theExpandAll()
and CollapseAll()
property of the TreeView class.
<Button Color="Color.Primary" Clicked="@(()=>treeViewRef.ExpandAll())">Expand all</Button> <Button Color="Color.Secondary" Clicked="@(()=>treeViewRef.CollapseAll())">Collapse all</Button> <TreeView @ref="" Nodes="Items" GetChildNodes="@(item => item.Children)" HasChildNodes="@(item => item.Children?.Any() == true)"> <NodeContent> <Icon Name="IconName.Folder" /> @context.Text </NodeContent> </TreeView>
@code { TreeView<Item> treeViewRef; public class Item { public string Text { get; set; } public IEnumerable<Item> Children { get; set; } } IEnumerable<Item> Items = new[] { new Item { Text = "Item 1" }, new Item { Text = "Item 2", Children = new [] { new Item { Text = "Item 2.1" }, new Item { Text = "Item 2.2", Children = new [] { new Item { Text = "Item 2.2.1" }, new Item { Text = "Item 2.2.2" }, new Item { Text = "Item 2.2.3" }, new Item { Text = "Item 2.2.4" } } }, new Item { Text = "Item 2.3" }, new Item { Text = "Item 2.4" } } }, new Item { Text = "Item 3" }, }; }
Multiple selection
The TreeView component multiple selection mode, allows users to select multiple nodes at the same time. To enable this mode, set the SelectionMode
property to Multiple
. When this mode is enabled, each node in the TreeView will display a checkbox next to its label. Users can then select or deselect nodes by clicking on the checkboxes.
The selected nodes can be accessed through the SelectedNodes
property, which returns a list of the selected nodes. You can also use the SelectedNodesChanged
event to be notified when the selection changes.
<TreeView Nodes="Items" GetChildNodes="@(item => item.Children)" HasChildNodes="@(item => item.Children?.Any() == true)" SelectionMode="TreeViewSelectionMode.Multiple" @bind-SelectedNodes="selectedNodes"> <NodeContent> <Icon Name="IconName.Folder" /> @context.Text </NodeContent> </TreeView>
@code { public class Item { public string Text { get; set; } public IEnumerable<Item> Children { get; set; } } IEnumerable<Item> Items = new[] { new Item { Text = "Item 1" }, new Item { Text = "Item 2", Children = new [] { new Item { Text = "Item 2.1" }, new Item { Text = "Item 2.2", Children = new [] { new Item { Text = "Item 2.2.1" }, new Item { Text = "Item 2.2.2" }, new Item { Text = "Item 2.2.3" }, new Item { Text = "Item 2.2.4" } } }, new Item { Text = "Item 2.3" }, new Item { Text = "Item 2.4" } } }, new Item { Text = "Item 3" }, }; IList<Item> selectedNodes = new List<Item>(); }
API
Attributes
Name | Description | Type | Default |
---|---|---|---|
Nodes |
Collection of child TreeView items (child nodes). If null/empty then this node won’t expand. | IEnumerable<TNode> |
|
NodeContent |
Template to display content for the node. | RenderFragment<TNode> |
|
SelectionMode |
Defines the selection mode of the TreeView. | TreeViewSelectionMode |
Single |
SelectedNode |
The currently selected TreeView item/node. | TNode |
|
SelectedNodeChanged |
Occurs when the selected TreeView node has changed. | EventCallback<TNode> |
|
SelectedNodes |
The currently selected TreeView items/nodes. | IList<TNode> |
|
SelectedNodesChanged |
Occurs when the selected TreeView nodes are changed. | EventCallback<IList<TNode>> |
|
AutoExpandAll |
Defines if the treenode should be automatically expanded. Note that it can happen only once when the tree is first loaded. | bool |
false |
ExpandedNodes |
List of currently expanded TreeView items (child nodes). | List<TNode> |
|
ExpandedNodeChanged |
Occurs when the collection of expanded nodes has changed. | EventCallback<TNode> |
|
GetChildNodes |
Expression that allows the child nodes to be identified for a particular node. | Func<TNode, IEnumerable<TNode>> |
|
HasChildNodes |
Expression that indicates whether the current node has any children nodes? | Func<TNode, bool> |
true |
GetChildNodesAsync |
Asynchronous expression that allows the child nodes to be identified for a particular node. | Func<TNode, Task<IEnumerable<TNode>>> |
|
HasChildNodesAsync |
Asynchronous expression that indicates whether the current node has any children nodes? | Func<TNode, Task<bool>> |
null |
ExpandIconName |
Defines the name of the treenode expand icon. | IconName |
ChevronRight |
ExpandIconStyle |
Defines the style of the treenode expand icon. | IconStyle? |
null |
ExpandIconSize |
Defines the size of the treenode expand icon. | IconSize? |
null |
CollapseIconName |
Defines the name of the treenode collapse icon. | IconName |
ChevronRight |
CollapseIconStyle |
Defines the style of the treenode collapse icon. | IconStyle? |
null |
CollapseIconSize |
Defines the size of the treenode collapse icon. | IconSize? |
null |
Methods
Name | Description | Return | Parameters |
---|---|---|---|
ExpandAll() |
Expands all the collapsed TreeView nodes. | void |
TNode node |
CollapseAll() |
Collapses all the expanded TreeView nodes. | void |
TNode node |
ToggleCheckNode() |
Toggles the checked state of the node when in multiple selection mode. | Task |
TNode node |