Hierarchical data source with same model at each level

[Terry]

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

[Daniel]

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