Hierarchical data source with same model at each level

2 posts, 0 answers
  1. Terry
    Terry avatar
    157 posts
    Member since:
    Jul 2009

    Posted 26 Jun 2013 Link to this post

    Hi:

    I am attempting to create a multi-level menu structure that is embodied in a treeview.  I have the same model at each level.  A simple example with two levels is not working.  (See below)

    Controller:
    public JsonResult JsonIndex()
    {
     
        var menus = _db.GetMenus( 0, 1, 1, 0 );
     
        var allMenus = from m in menus
                       where m.MenuId == 1
                       select new
                           {
                               Name = m.MenuName,
                               ImageUrl = m.MenuImageUrl,
                               NavUrl = m.MenuNavUrl,
                               hasChildren = true,
                               children = from m2 in menus
                                    where m2.ParentMenuId == m.MenuId
                                    select new
                                    {
                                       Name = m2.MenuName,
                                       ImageUrl = m2.MenuImageUrl,
                                       NavUrl = m2.MenuNavUrl,
                                       hasChildren = false,
                                    }
                           };
     
     
     
     
     
        JsonResult json = Json( allMenus, JsonRequestBehavior.AllowGet );
        return ( json );
    }
    cshtml:

    <script>
         $(document).ready(function () {
              
     
             function populateTreeView() {
                 var remoteDataSource = new kendo.data.HierarchicalDataSource({
                     type: "json",
                     transport: {
                         read: "Home/JsonIndex"
                     },
                     schema: {
                         model: {
                             text: "Name",
                             ImageUrl: "ImageUrl",
                             expanded: true,
                             children: "children",
                             hasChildren: "hasChildren",
                             NavUrl: "NavUrl"
                         }
                     }
                 });
                  
     
                 $("#tv").kendoTreeView({
                     id: "tree123",
                     Name: "tree123",
                     dataSource: remoteDataSource,
                     dataTextField: "Name",
                     dataImageUrlField: "ImageUrl",
                     select: onTreeViewSelect 
                 });
             }
     
             $(document).ready(function () {
                 populateTreeView();
             });
     
         });
     </script>
    The actual menu is more than two levels, but I can't even get this simple case to work.  What am I doing wrong?

    Thanks,

    Terry
  2. Daniel
    Admin
    Daniel avatar
    2118 posts

    Posted 01 Jul 2013 Link to this post

    Hello Terry,

    Please try using a property with a different name for the children. The nodes already have a property named children which is used for the child dataSource so using the same name could cause problems. Besides that the code looks OK. If the problem persist, please provide a runnable sample so I can investigate further.

    Regards,
    Daniel
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. UI for ASP.NET MVC is VS 2017 Ready
Back to Top