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


    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)

    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 );

         $(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"
                     id: "tree123",
                     Name: "tree123",
                     dataSource: remoteDataSource,
                     dataTextField: "Name",
                     dataImageUrlField: "ImageUrl",
                     select: onTreeViewSelect 
             $(document).ready(function () {
    The actual menu is more than two levels, but I can't even get this simple case to work.  What am I doing wrong?


  2. Daniel
    Daniel avatar
    2177 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.

    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top