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 110+ 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 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 = SvgIcon.Folder
        });
        items.Add(new TreeItem()
        {
            Id = 2,
            Text = "css",
            ParentId = 1,
            HasChildren = true,
            Icon = SvgIcon.Folder
        });
        items.Add(new TreeItem()
        {
            Id = 3,
            Text = "js",
            ParentId = 1,
            HasChildren = true,
            Icon = SvgIcon.Folder
        });
        items.Add(new TreeItem()
        {
            Id = 4,
            Text = "site.css",
            ParentId = 2,
            Icon = SvgIcon.Css
        });
        items.Add(new TreeItem()
        {
            Id = 5,
            Text = "scripts.js",
            ParentId = 3,
            Icon = SvgIcon.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 ISvgIcon 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.

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.
DragThrottleInterval int
(0)
The milliseconds between each firing of the OnDrag event during the dragging operations.

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

See Also

In this article