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 65+ native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
To use a Telerik TreeView for Blazor:
- add the
TelerikTreeView
tag - provide a collection of models to its
Data
property (read more in the Data Binding article) - 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;
}
}