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 95+ 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 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.

Attribute	Type and Default Value	Description
Class	string	Renders additional CSS class to 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.

Next Steps

• Review TreeView data binding
• Experiment with TreeView Checkboxes

See Also

• Live TreeView Demos
• TreeVew API Reference