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).
  • Allow Node Items to be disabled for selection.
  • 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 your index.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.
Item 1
Item 2
Item 3
<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 the ExpandAll() and CollapseAll() property of the TreeView class.
Item 1
Item 2
Item 3
<Button Color="Color.Primary" Clicked="@(()=>treeViewRef.ExpandAll())">Expand all</Button>
<Button Color="Color.Secondary" Clicked="@(()=>treeViewRef.CollapseAll())">Collapse all</Button>

<TreeView @ref="@treeViewRef" 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.

Item 1
Item 2
Item 3
<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>();
}

Observable Lists

The Observable Lists feature in Blazorise TreeView component enables automatic updates and synchronization of the TreeView data with the underlying data source. This is achieved through the implementation of an observable pattern where the TreeView component listens to changes in the data source, and updates its visual representation accordingly.

When using Observable Lists in the Blazorise TreeView component, any modifications to the underlying data source, such as adding, removing, or updating nodes, will automatically trigger the necessary updates in the TreeView component. This ensures that the TreeView always reflects the most up-to-date state of the data.

Item 1
Item 2
Item 3
@using System.Collections.ObjectModel;

<Row>
    <Column>
        <Button Clicked="@OnAddNodeClick" Color="Color.Primary">Add node</Button>
    </Column>
    <Column>
        <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>
    </Column>
</Row>

@code {
    private Task OnAddNodeClick()
    {
        Items.Add( new Item { Text = $"Item {Items.Count + 1}" } );

        return Task.CompletedTask;
    }

    public class Item
    {
        public string Text { get; set; }
        public IEnumerable<Item> Children { get; set; }
    }

    ObservableCollection<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;
}

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> (node) => false
IsDisabled Expression that indicates whether the current node should be disabled from selection Func<TNode, bool> (node) => false
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. Task
CollapseAll() Collapses all the expanded TreeView nodes. Task
ToggleCheckNode() Toggles the checked state of the node when in multiple selection mode. Task TNode node
SelectNode() Selects the node when in single selection mode. void TNode node
RemoveNode() Attempts to find and remove an existing node from the TreeView. Task TNode node
Reload() Triggers the reload of the TreeView Nodes. Task
On this page