how to bind kendo tree view using TreeViewItemModel

6 posts, 0 answers
  1. vikas gupta
    vikas gupta avatar
    38 posts
    Member since:
    Nov 2009

    Posted 04 May 2013 Link to this post

    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")       
        )
         
    )
  2. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2527 posts

    Posted 06 May 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. vikas gupta
    vikas gupta avatar
    38 posts
    Member since:
    Nov 2009

    Posted 08 May 2013 Link to this post

    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
  4. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2527 posts

    Posted 08 May 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Heiko
    Heiko avatar
    153 posts
    Member since:
    Oct 2012

    Posted 13 Aug 2018 in reply to Alex Gyoshev Link to this post

    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

  6. Ivan Danchev
    Admin
    Ivan Danchev avatar
    2063 posts

    Posted 15 Aug 2018 Link to this post

    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
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top