TreeView Binding
The TreeView provides support for declaratively defining its items and for local (on the server) and remote (using a DataSource configuration object) binding.
Do not use the names of the
kendo.data.Nodefields and methods (for example,children) as fields in the TreeView data.
Declaring TreeView Items
The TreeView allows you to declare all its items within the 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");
});
})
)
<kendo-treeview auto-bind="true" load-on-demand="true" name="treeview">
<items>
<treeview-item expanded="true" text="My Web Site">
<items>
<treeview-item expanded="true" text="images">
<items>
<treeview-item text="logo.png">
</treeview-item>
<treeview-item text="body-back.png">
</treeview-item>
</items>
</treeview-item>
<treeview-item text="about.html" >
</treeview-item>
<treeview-item text="contacts.html" >
</treeview-item>
</items>
</treeview-item>
</items>
</kendo-treeview>
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)
)
<kendo-treeview name="treeview-left" bind-to="(IEnumerable<TreeViewItemBase>)ViewBag.inlineDefault">
</kendo-treeview>
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;
}
public class TreeViewItemViewModel
{
public string Id { get; set; }
public bool Expanded { get; set; }
public bool Encoded { get; set; }
public string Text { get; set; }
public string SpriteCssClass { get; set; }
public string Url { get; set; }
public string ImageUrl { get; set; }
public bool HasChildren { get; set; }
public bool Checked { get; set; }
public List<TreeViewItemModel> Items { get; set; }
public IDictionary<string, string> HtmlAttributes { get; set; }
public IDictionary<string, string> ImageHtmlAttributes { get; set; }
public IDictionary<string, string> LinkHtmlAttributes { get; set; }
public bool Selected { get; set; }
}
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")
)
)
)
<kendo-treeview auto-bind="true" datatextfield="Name" load-on-demand="true" name="treeview">
<hierarchical-datasource>
<schema>
<hierarchical-model id="id"></hierarchical-model>
</schema>
<transport>
<read url="@Url.Action("Read_TreeViewData", "TreeView")"/>
</transport>
</hierarchical-datasource>
</kendo-treeview>
public static IList<HierarchicalViewModel> GetHierarchicalData()
{
var result = new List<HierarchicalViewModel>()
{
new HierarchicalViewModel() { ID = 1, ParentID = null, HasChildren = true, Name = "Parent item" },
new HierarchicalViewModel() { ID = 2, ParentID = 1, HasChildren = true, Name = "Parent item" },
new HierarchicalViewModel() { ID = 3, ParentID = 1, HasChildren = false, Name = "Item" },
new HierarchicalViewModel() { ID = 4, ParentID = 2, HasChildren = false, Name = "Item" },
new HierarchicalViewModel() { ID = 5, ParentID = 2, HasChildren = false, Name = "Item" }
};
return result;
}
public IActionResult Read_TreeViewData(int? id)
{
var result = GetHierarchicalData()
.Where(x => id.HasValue ? x.ParentID == id : x.ParentID == null)
.Select(item => new {
id = item.ID,
Name = item.Name,
expanded = item.Expanded,
imageUrl = item.ImageUrl,
hasChildren = item.HasChildren
});
return Json(result);
}
public class HierarchicalViewModel
{
public int ID { get; set; }
public int? ParentID { get; set; }
public bool HasChildren { get; set; }
public string Name { get; set; }
public bool Expanded { get; set; }
public string ImageUrl { get; set; }
}
By default, the TreeView sends to the remote endpoint the id of the expanded node. To send additional data use the DataSource Data method and provide the name of a JavaScript function which will return a JavaScript object with the additional data.
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")))
)
)
<kendo-treeview auto-bind="true" datatextfield="Name" load-on-demand="true" name="treeview">
<hierarchical-datasource>
<schema>
<hierarchical-model id="id"></hierarchical-model>
</schema>
<transport>
<read url="@Url.Page("TreeViewIndex", "TreeViewRead")"/>
</transport>
</hierarchical-datasource>
</kendo-treeview>
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);
}