Treeview Overview

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

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

Download Free Trial

To use a Telerik TreeView for Blazor:

1. add the TelerikTreeView tag
2. provide a collection of models to its Data property (read more in the Data Binding article)
3. match the fields in the models with the binding schema for the nodes

Basic treeview with flat data binding and built-in icons

Sample treeview bound to self-referencing flat data. Also uses the built-in icons from the Telerik suite

<TelerikTreeView Data="@FlatData">
    <TreeViewBindings>
        <TreeViewBinding IdField="Id" ParentIdField="ParentIdValue" ExpandedField="Expanded" TextField="Text" HasChildrenField="HasChildren" IconField="Icon" />
    </TreeViewBindings>
</TelerikTreeView>

@code {
    public class TreeItem
    {
        public int Id { get; set; }
        public string Text { get; set; }
        public int? ParentIdValue { get; set; }
        public bool HasChildren { get; set; }
        public string Icon { get; set; }
        public bool Expanded { get; set; }
    }

    public IEnumerable<TreeItem> FlatData { get; set; }

    protected override void OnInitialized()
    {
        LoadFlatData();
    }

    private void LoadFlatData()
    {
        List<TreeItem> items = new List<TreeItem>();

        items.Add(new TreeItem()
        {
            Id = 1,
            Text = "Project",
            ParentIdValue = null,
            HasChildren = true,
            Icon = "folder",
            Expanded = true
        });

            items.Add(new TreeItem()
            {
                Id = 2,
                Text = "Design",
                ParentIdValue = 1,
                HasChildren = true,
                Icon = "brush",
                Expanded = true
            });
            items.Add(new TreeItem()
            {
                Id = 3,
                Text = "Implementation",
                ParentIdValue = 1,
                HasChildren = true,
                Icon = "folder",
                Expanded = true
            });

                items.Add(new TreeItem()
                {
                    Id = 4,
                    Text = "site.psd",
                    ParentIdValue = 2,
                    HasChildren = false,
                    Icon = "psd",
                    Expanded = true
                });
                items.Add(new TreeItem()
                {
                    Id = 5,
                    Text = "index.js",
                    ParentIdValue = 3,
                    HasChildren = false,
                    Icon = "js"
                });
                items.Add(new TreeItem()
                {
                    Id = 6,
                    Text = "index.html",
                    ParentIdValue = 3,
                    HasChildren = false,
                    Icon = "html"
                });
                items.Add(new TreeItem()
                {
                    Id = 7,
                    Text = "styles.css",
                    ParentIdValue = 3,
                    HasChildren = false,
                    Icon = "css"
                });

        FlatData = items;
    }
}

The result from the snippet above

Component namespace and reference

@using Telerik.Blazor.Components

<TelerikTreeView @ref="theTreeView">
</TelerikTreeView>

@code {
    Telerik.Blazor.Components.TelerikTreeView theTreeView;
}

Navigate Views

A treeview is often used to list pages, views or sections in an application so the user can navigate through them. To do that with a treeview, you have two options:

• Use the built-in UrlField in the data bindings to populate the URLs in the anchors the treeview will generate for you.
• use a Template to generate the desired links (e.g., NavLink components) with your own code to enable fine-tuning.

Navigation with treeview through the UrlField

Built-in navigation between views

<TelerikTreeView Data="@TreeData">
    <TreeViewBindings>
        <TreeViewBinding UrlField="Page" ParentIdField="ParentIdValue">
        </TreeViewBinding>
    </TreeViewBindings>
</TelerikTreeView>

@code {
    public class TreeItem
    {
        public int Id { get; set; }
        public string Text { get; set; }
        public int? ParentIdValue { get; set; }
        public bool HasChildren { get; set; }
        public string Page { get; set; }
        public bool Expanded { get; set; }
    }

    public IEnumerable<TreeItem> TreeData { get; set; }

    protected override void OnInitialized()
    {
        LoadTreeData();
    }

    private void LoadTreeData()
    {
        List<TreeItem> items = new List<TreeItem>();

        items.Add(new TreeItem()
        {
            Id = 1,
            Text = "Project",
            ParentIdValue = null,
            HasChildren = true,
            Page = "one", //the URL to navigate to
            Expanded = true
        });

        items.Add(new TreeItem()
        {
            Id = 2,
            Text = "Design",
            ParentIdValue = 1,
            HasChildren = false,
            Page = "two", //the URL to navigate to
            Expanded = true
        });
        items.Add(new TreeItem()
        {
            Id = 3,
            Text = "Implementation",
            ParentIdValue = 1,
            HasChildren = false,
            Page = "three", //the URL to navigate to
            Expanded = true
        });

        TreeData = items;
    }
}

See Also

• Data Binding a TreeView
• Live Demo: TreeView
• API Reference