The TreeView provides support for declaratively defining its items and for local (on the server) and remote (using a DataSource configuration object) binding.
<kendo-treeviewauto-bind="true"load-on-demand="true"name="treeview"><items><treeview-itemexpanded="true"text="My Web Site"><items><treeview-itemexpanded="true"text="images"><items><treeview-itemtext="logo.png"></treeview-item><treeview-itemtext="body-back.png"></treeview-item></items></treeview-item><treeview-itemtext="about.html"></treeview-item><treeview-itemtext="contacts.html"></treeview-item></items></treeview-item></items></kendo-treeview>
publicActionResultLocal_Data_Binding(){
ViewBag.treeData =GetData();returnView();}privateIEnumerable<TreeViewItemModel>GetData(){List<TreeViewItemModel> inline =newList<TreeViewItemModel>{newTreeViewItemModel{
Text ="Furniture",
Items =newList<TreeViewItemModel>{newTreeViewItemModel(){
Text ="Tables & Chairs"},newTreeViewItemModel{
Text ="Sofas"},newTreeViewItemModel{
Text ="Occasional Furniture"}}},newTreeViewItemModel{
Text ="Decor",
Items =newList<TreeViewItemModel>{newTreeViewItemModel(){
Text ="Bed Linen"},newTreeViewItemModel{
Text ="Curtains & Blinds"},newTreeViewItemModel{
Text ="Carpets"}}}};return inline;}
publicstaticIList<HierarchicalViewModel>GetHierarchicalData(){var result =newList<HierarchicalViewModel>(){newHierarchicalViewModel(){ ID =1, ParentID =null, HasChildren =true, Name ="Parent item"},newHierarchicalViewModel(){ ID =2, ParentID =1, HasChildren =true, Name ="Parent item"},newHierarchicalViewModel(){ ID =3, ParentID =1, HasChildren =false, Name ="Item"},newHierarchicalViewModel(){ ID =4, ParentID =2, HasChildren =false, Name ="Item"},newHierarchicalViewModel(){ ID =5, ParentID =2, HasChildren =false, Name ="Item"}};return result;}publicIActionResultRead_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
});returnJson(result);}
C#
publicclassHierarchicalViewModel{publicint ID {get;set;}publicint? ParentID {get;set;}publicbool HasChildren {get;set;}publicstring Name {get;set;}publicbool Expanded {get;set;}publicstring 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.