TreeView Binding
The TreeView HTML helper provides support for declaratively defining its items and for local (on the server) and remote (using a DataSource configuration object) binding.
Declaring TreeView Items
The TreeView allows you to declare all its items within the HTML helper declaration.
The following example demonstrates how to configure a TreeView with three levels of hierarchy.
@(Html.Kendo().TreeView()
.Name("treeview")
.Items(treeview =>
{
treeview.Add().Text("My Web Site")
.Items(root =>
{
root.Add().Text("images")
.Items(images =>
{
images.Add().Text("logo.png");
images.Add().Text("body-back.png");
});
root.Add().Text("about.html");
root.Add().Text("contacts.html");
});
})
)
Local Data Binding
You can bind the TreeView locally on the server by passing the appropriate collection to the HTML helper BindTo() method.
@(Html.Kendo().TreeView()
.Name("treeview-left")
.BindTo((IEnumerable<TreeViewItemModel>)ViewBag.treeData)
)
public ActionResult Local_Data_Binding()
{
ViewBag.treeData = GetData();
return View();
}
private IEnumerable<TreeViewItemModel> GetData()
{
List<TreeViewItemModel> inline = new List<TreeViewItemModel>
{
new TreeViewItemModel
{
Text = "Furniture",
Items = new List<TreeViewItemModel>
{
new TreeViewItemModel()
{
Text = "Tables & Chairs"
},
new TreeViewItemModel
{
Text = "Sofas"
},
new TreeViewItemModel
{
Text = "Occasional Furniture"
}
}
},
new TreeViewItemModel
{
Text = "Decor",
Items = new List<TreeViewItemModel>
{
new TreeViewItemModel()
{
Text = "Bed Linen"
},
new TreeViewItemModel
{
Text = "Curtains & Blinds"
},
new TreeViewItemModel
{
Text = "Carpets"
}
}
}
};
return inline;
}
Remote Data Binding
The TreeView provides support for remote data binding by using a DataSource configuration object.
@(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);
}
Razor Pages
In order to set up the TreeView component bindings, you need to configure the Read method of its DataSource instance. The URL in this method should refer the name of the method in the PageModel. See the implementation details in the example below, and for the full project with RazorPages examples, visit our GitHub repository.
@(Html.Kendo().TreeView()
.Name("treeview")
.DataTextField("Name")
.DataSource(dataSource => dataSource
.Read(r => r.Url(Url.Page("TreeViewIndex", "TreeViewRead")))
)
)
public JsonResult OnGetTreeViewRead(int? id)
{
var data = result.Where(x => id.HasValue ? x.ParentID == id : x.ParentID == null)
.Select(item => new {
id = item.ID,
Name = item.Name,
hasChildren = item.HasChildren
});
return new JsonResult(data);
}