how to bind kendo tree view using TreeViewItemModel

[vikas gupta]

I a binding the kendo treeview using the below set of code but it is showing only the parents not showing the childs:

public List<TreeViewItemModel> TreeItems
         {
             get
             {
                 lstTreeItems = new List<TreeViewItemModel>()
                {
                    new TreeViewItemModel()
                    {
                        Text = "Departments",
                        HasChildren=true,
                        Items = new List<TreeViewItemModel>
                        {
                            new TreeViewItemModel()
                            {
                                Text = "Sales",
                                ImageUrl="/Images/folder.png",
                                HasChildren=false
                            },
                            new TreeViewItemModel
                            {
                                 Text = "Marketing",
                                ImageUrl="/Images/folder.png",
                                HasChildren=false
                            },
                            new TreeViewItemModel
                            {
                                 Text = "Account",
                                ImageUrl="/Images/folder.png",
                                HasChildren=false
                            }
                        }

                    },
                    new TreeViewItemModel
                    {
                        Text = "Users",
                        HasChildren=true,
                        Items = new List<TreeViewItemModel>
                        {
                            new TreeViewItemModel()
                            {
                                Text = "David"    ,
                                ImageUrl="/Images/folder.png",
                                HasChildren=false
                            },
                            new TreeViewItemModel
                            {
                                 Text = "Eric",
                                ImageUrl="/Images/folder.png",
                                HasChildren=false
                            },
                            new TreeViewItemModel
                            {
                                 Text = "Enrique",
                                ImageUrl="/Images/folder.png",
                                HasChildren=false
                            }
                        }
                    }
                };
                 return lstTreeItems;
             }
         }

        [OutputCache(NoStore=true,Duration=0)]
         public JsonResult GetFolderTreeData()
        {

            var test = TreeItems;

            //var employees = new { Text = "Departments", ImageUrl = "/Images/folder.png", HasChildren = true };


            //return Json(employees, JsonRequestBehavior.AllowGet);

            DashboardViewModel model = new DashboardViewModel();
            return Json(test, JsonRequestBehavior.AllowGet);
        }

@(Html.Kendo().TreeView()
    .Name("treeview").DataTextField("Text").DataImageUrlField("ImageUrl")
    .DataSource(dataSource => dataSource
        .Read(read => read
            .Action("GetFolderTreeData", "Dashboard")
        )
    )
    .Events(events => events
        .Select("onSelect")
    )

)

[Alex Gyoshev]

Hello Vikas,

When using the datasource remote binding, you can bind only one level at a time. If you need to bind the complete tree initially, use the treeview BindTo or Items methods.

Regards,
Alex Gyoshev
the Telerik team

[vikas gupta]

please can you send me any sample application,i am able to bind parent using data source, I am unable to get the way of binding the child using data source.

Thanks

[Alex Gyoshev]

Hello Vikas,

See the TreeView / Remote Data example in the examples project that is shipped with the Kendo MVC wrappers. It shows the per-level binding using AJAX. All other examples show the static binding through the BindTo and Items methods.

The sample application is located in the wrappers/aspnetmvc/Examples directory of the distribution package.

Kind regards,
Alex Gyoshev
the Telerik team

[Heiko]

Hi,
I know that is more than 5 years old, but I ran into the same problem. And: I can't find any example of the per-level binding using AJAX (which I urgently need!!). Seems that the wrappers/aspnetmvc/Example folder does no longer include this. Please, help!

Regards
Heiko

[Ivan Danchev]

Hi Heiko,

See the following demo, which demonstrates per-level binding with the AJAX. On expanding a parent the next level of nodes are loaded and so on. This demo is included in the sample application downloadable from your account.

Regards,
Ivan Danchev
Progress Telerik