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.

Telerik UI for Blazor Ninja image

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.

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:

Selection

The TreeView supports two selection modes:

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.

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

See Also

In this article