TreeView Overview
The TreeView is part of Telerik UI for ASP.NET MVC, 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 HtmlHelper for ASP.NET MVC is a server-side wrapper 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")
.DataTextField("Name")
.DataSource(dataSource => dataSource
.Read(read => read
.Action("Read_TreeViewData", "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);
}
Basic Configuration
The following example demonstrates the basic configuration of the TreeView HtmlHelper and how to get the TreeView instance.
@(Html.Kendo().TreeView()
.Name("treeview")
.Checkboxes(true)
.DragAndDrop(true)
.DataTextField("Name")
.DataSource(dataSource => dataSource
.Read(read => read
.Action("Employees", "TreeView")
)
)
)
<script type="text/javascript">
$(function () {
// The Name() of the TreeView is used to get its client-side instance.
var treeview = $("#treeview").data("kendoTreeView");
console.log(treeview);
});
</script>
Functionality and Features
Events
The following example demonstrates the available TreeView events and how an event handler could be implemented for each of them. For a complete example on basic TreeView events, refer to the demo on using the events of the TreeView.
@(Html.Kendo().TreeView()
.Name("treeview")
.Checkboxes(true)
.DragAndDrop(true)
.LoadOnDemand(false)
.Events(events => events
.Change("onChange")
.Select("onSelect")
.Check("onCheck")
.Collapse("onCollapse")
.Expand("onExpand")
.DragStart("onDragStart")
.Drag("onDrag")
.Drop("onDrop")
.DragEnd("onDragEnd")
.Navigate("onNavigate")
.LoadCompleted("onLoadCompleted")
)
.DataTextField("Name")
.DataSource(dataSource => dataSource
.Read(read => read
.Action("Employees", "treeview")
)
)
)
<script type="text/javascript">
function onChange(e) {
console.log('Selected node changed to:', e.sender.select());
}
function onSelect(e) {
console.log('Selected node:', e.node);
}
function onCheck(e) {
console.log('Checked node:', e.node);
}
function onCollapse(e) {
console.log('Collapsed node:', e.node);
}
function onExpand(e) {
console.log('Expanded node:', e.node);
}
function onDragStart(e) {
console.log('Started dragging:', e.sourceNode);
}
function onDrag(e) {
console.log("Dragging:", e.sourceNode);
}
function onDragEnd(e) {
console.log("Finished dragging:", e.sourceNode);
}
function onDrop(e) {
console.log("Dropped:", e.sourceNode);
}
function onLoadCompleted(e) {
console.log("Load Completed: ", Array.prototype.map.call(e.nodes, function (item) { return item.Name; }).join(", "));
}
</script>