ASP.NET Core TreeView Overview
The TreeView is part of Telerik UI for ASP.NET Core, a
professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
The Telerik UI TreeView TagHelper and HtmlHelper for ASP.NET Core are server-side wrappers for the Kendo UI TreeView widget.
The TreeView displays hierarchical data in a traditional tree structure.
Initializing the TreeView
The following example demonstrates how to define the TreeView.
@(Html.Kendo().TreeView()
.Name("treeview")
.Items(items =>
{
items.Add().Text("Item 1").Expanded(true)
.Items(subItems =>
{
subItems.Add().Text("Item 1.1");
subItems.Add().Text("Item 1.2");
subItems.Add().Text("Item 1.3");
});
items.Add().Text("Item 2")
.Items(subItems =>
{
subItems.Add().Text("Item 2.1");
subItems.Add().Text("Item 2.2");
subItems.Add().Text("Item 2.3");
});
items.Add().Text("Item 3");
})
)
@addTagHelper *, Kendo.Mvc
<kendo-treeview name="treeview">
<items>
<treeview-item expanded="true" text="Item 1">
<items>
<treeview-item text="Item 1.1"></treeview-item>
<treeview-item text="Item 1.2"></treeview-item>
<treeview-item text="Item 1.3"></treeview-item>
</items>
</treeview-item>
<treeview-item text="Item 2">
<items>
<treeview-item text="Item 2.1"></treeview-item>
<treeview-item text="Item 2.2"></treeview-item>
<treeview-item text="Item 2.3"></treeview-item>
</items>
</treeview-item>
<treeview-item text="Item 3"></treeview-item>
</items>
</kendo-treeview>
public static IList<HierarchicalViewModel> GetHierarchicalData()
{
var result = new List<HierarchicalViewModel>()
{
new HierarchicalViewModel() { ID = 1, ParendID = null, HasChildren = true, Name = "Parent item" },
new HierarchicalViewModel() { ID = 2, ParendID = 1, HasChildren = true, Name = "Parent item" },
new HierarchicalViewModel() { ID = 3, ParendID = 1, HasChildren = false, Name = "Item" },
new HierarchicalViewModel() { ID = 4, ParendID = 2, HasChildren = false, Name = "Item" },
new HierarchicalViewModel() { ID = 5, ParendID = 2, HasChildren = false, Name = "Item" }
};
return result;
}
public IActionResult Read_TreeViewData(int? id)
{
var result = GetHierarchicalData()
.Where(x => id.HasValue ? x.ParendID == id : x.ParendID == null)
.Select(item => new {
id = item.ID,
Name = item.Name,
expanded = item.Expanded,
imageUrl = item.ImageUrl,
hasChildren = item.HasChildren
});
return Json(result);
}
Do not use the names of the
kendo.data.Nodefields and methods (for example,children) as fields in the TreeView data.
Basic Configuration
The following example demonstrates how to configure the TreeView to bind to remote data and access the TreeView instance.
@(Html.Kendo().TreeView()
.Name("treeview")
.DragAndDrop(true)
.DataTextField("Name")
.DataSource(dataSource => dataSource
.Read(read => read
.Action("ReadItems", "TreeView")
)
)
)
<script type="text/javascript">
$(function () {
// Select the TreeView element by using its "Name()" to get the client-side instance.
var treeview = $("#treeview").data("kendoTreeView");
console.log(treeview);
});
</script>
<kendo-treeview name="treeview" drag-and-drop="true" datatextfield="Name">
<hierarchical-datasource>
<transport>
<read url="@Url.Action("ReadItems", "Treeview")"/>
</transport>
<schema>
<hierarchical-model id="id"></hierarchical-model>
</schema>
</hierarchical-datasource>
</kendo-treeview>
<script type="text/javascript">
$(function () {
// Select the TreeView element by using its "Name()" to get the client-side instance.
var treeview = $("#treeview").data("kendoTreeView");
console.log(treeview);
});
</script>
public List<HierarchicalViewModel> GetHierarchicalData()
{
var data = new List<HierarchicalViewModel>()
{
new HierarchicalViewModel() { ID = 1, ParendID = null, HasChildren = true, Name = "Parent item" },
new HierarchicalViewModel() { ID = 2, ParendID = 1, HasChildren = true, Name = "Item 1" },
new HierarchicalViewModel() { ID = 3, ParendID = 1, HasChildren = false, Name = "Item 2" },
new HierarchicalViewModel() { ID = 4, ParendID = 2, HasChildren = false, Name = "Item 1.1" },
new HierarchicalViewModel() { ID = 5, ParendID = 2, HasChildren = false, Name = "Item 1.2" }
};
return data;
}
public JsonResult ReadItems(int? id)
{
var result = GetHierarchicalData()
.Where(x => id.HasValue ? x.ParendID == id : x.ParendID == null)
.Select(item => new {
id = item.ID,
Name = item.Name,
hasChildren = item.HasChildren
});
return Json(result);
}
Do not use the names of the
kendo.data.Nodefields and methods (for example,children) as fields in the TreeView data.
Functionality and Features
| Feature | Description |
|---|---|
| Data Binding | Explore the available data-binding approaches of the TreeView. |
| Animations | Configure different animation effects when expanding or collapsing the TreeView nodes. |
| Appearance | The TreeView has built-in styling options that allow you to customize its appearance. |
| Items | Set up the TreeView by adding items within the helper declaration. |
| Images | Enhance the TreeView items by adding images or sprites. |
| Drag and Drop | Enable the drag-and-drop feature of the component. |
| Checkboxes | Render the TreeView items with checkboxes. |
| Templates | To take full control over the rendering of the TreeView items, use templates. |
| Events | The component exposes various events that allow you to respond to user actions. |
| Accessibility | The TreeView is accessible by screen readers and provides WAI-ARIA, Section 508, WCAG 2.2, and keyboard support. |
Next Steps
- Getting Started with the TreeView
Basic Usage of the TreeView HtmlHelper for ASP.NET Core (Demo)
Basic Usage of the TreeView TagHelper for ASP.NET Core (Demo)