Blazor Treeview Overview

The Blazor Treeview component displays data in a traditional tree-like structure. The data itself can be flat or hierarchical. In addition to built-in navigation capabilities, you can navigate through the items and their children, define templates for the individual nodes, render text, checkboxes and icons, and respond to events.

The TreeView component is part of Telerik UI for Blazor, a professional grade UI library with 100 native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

Download Free Trial

Creating Blazor TreeView

1. Use the TelerikTreeView tag.
2. Set the TreeView Data attribute to an IEnumerable<T>. The TreeView will automatically recognize property names like Id, ParentId, Text and a few others. Otherwise, use bindings to configure custom property names.
3. (optional) Set the ExpandedItems attribute to a non-null IEnumerable<object>. Use it to expand or collapse items programmatically.

TreeView with flat self-referencing data and icons

<TelerikTreeView Data="@FlatData"
                 @bind-ExpandedItems="@ExpandedItems" />

@code {
    IEnumerable<TreeItem> FlatData { get; set; }
    IEnumerable<object> ExpandedItems { get; set; } = new List<TreeItem>();

    protected override void OnInitialized()
    {
        FlatData = GetFlatData();

        ExpandedItems = FlatData.Where(x => x.HasChildren == true).ToList();
    }

    List<TreeItem> GetFlatData()
    {
        List<TreeItem> items = new List<TreeItem>();

        items.Add(new TreeItem()
        {
            Id = 1,
            Text = "wwwroot",
            ParentId = null,
            HasChildren = true,
            Icon = "folder"
        });
        items.Add(new TreeItem()
        {
            Id = 2,
            Text = "css",
            ParentId = 1,
            HasChildren = true,
            Icon = "folder"
        });
        items.Add(new TreeItem()
        {
            Id = 3,
            Text = "js",
            ParentId = 1,
            HasChildren = true,
            Icon = "folder"
        });
        items.Add(new TreeItem()
        {
            Id = 4,
            Text = "site.css",
            ParentId = 2,
            Icon = "css"
        });
        items.Add(new TreeItem()
        {
            Id = 5,
            Text = "scripts.js",
            ParentId = 3,
            Icon = "js"
        });

        return items;
    }

    public class TreeItem
    {
        public int Id { get; set; }
        public string Text { get; set; }
        public int? ParentId { get; set; }
        public bool HasChildren { get; set; }
        public string Icon { get; set; }
    }
}

Data Binding

The TreeView provides flexible data binding with the following capabilities:

• Binding to flat data (self-referencing data)
• Binding to hierarchical data. It is possible to use different types for the items at different levels.
• Loading child items on demand to improve performance
• Setting property names for item IDs, text, parent IDs, icons, links, etc.

Selection

The TreeView supports two selection modes:

• Standard selection via item clicks
• Checkbox selection that allows selecting all child items at once

Templates

Use templates to customize the TreeView item rendering. Define a single template for all levels, or a different template for each level.

Drag and Drop

Users can drag and drop TreeView items within the same TreeView or between different ones.

Navigate Views

The TreeView can display links to app views and external pages.

TreeView Parameters

The following table lists TreeView parameters, which are not related to other features on this page. Check the TreeView API Reference for a full list of properties, methods and events.

Parameter	Type and Default Value	Description
Class	string	The additional CSS class that will be rendered on the div.k-treeview element. Use it to apply custom styles or override the theme.
Size	string "md"	Affects the TreeView layout, for example the amount of space between items. The possible valid values are "lg" (large), "md" (medium) and "sm" (small). For easier setting, use the predefined string properties in class Telerik.Blazor.ThemeConstants.TreeView.Size.

TreeView Reference and Methods

To execute TreeView methods, obtain reference to the component instance via @ref.

The TreeView is a generic component. Its type depends on the type of its model and the type of its Value. In case you cannot provide either the Value or Data initially, you need to set the corresponding types to the TItem and TValue parameters.

The table below lists the TreeView methods. Also consult the TreeView API.

Method	Description
Rebind	Refreshes the component data.
GetItemFromDropIndex (string index)	gets the corresponding TItem of the destination TreeView from the passed DestinationIndex

<TelerikTreeView @ref="@TreeViewRef" .../>

@code{
    private TelerikTreeView TreeViewRef;
}

Next Steps

• Review TreeView data binding
• Experiment with TreeView Checkboxes

See Also

• Live TreeView Demos
• TreeVew API Reference