Quantcast
Channel: Telerik Forums RSS
Viewing all articles
Browse latest Browse all 84751

MVVM Treeview databinding with multilevel data

$
0
0

Hello,

My problem is that the documentation is not clear on if/how it is possible to data-bind a TreeView on a multilevel data which is loaded with one call.

Let's say my data is the following:
public class TreeLevel1ViewModel
{
public int Id { get; set; }
public string Name { get; set; }
public IList<TreeLevel2ViewModel> TreeLevel2 { get; set; }
}
public class TreeLevel2ViewModel
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public IList<TreeLevel3ViewModel>  TreeLevel3 { get; set; }
    }
public class TreeLevel3ViewModel
    {
        public int Id { get; set; }
        public string Name { get; set; }
    }

And I want to call the TreeLevel1ViewModel once already built with the children:

[HttpGet]
        public HttpResponseMessage Get()
        {
            return Request.CreateResponse(HttpStatusCode.OK,
                new
                {
                    data = RetrieveTreeList()
                });
        }

        private static IEnumerable<TreeLevel1ViewModel> RetrieveTreeList()
        {
            IList<TreeLevel1ViewModel> list = new List<TreeLevel1ViewModel>();
            for (int i = 0; i < 3; i++)
            {
                TreeLevel1ViewModel level1 = new TreeLevel1ViewModel
                {
                    Id = i,
                    Name = $"Level1 {i}",
                    TreeLevel2 = new List<TreeLevel2ViewModel>()
                };

                for (int j = 0; j < 4; j++)
                {
                    var level2 = new TreeLevel2ViewModel
                    {
                        Id = j,
                        Name = $"Level2 {i}{j}",
                        TreeLevel3 = new List<TreeLevel3ViewModel>()
                    };

                    for (int k = 0; k < 2; k++)
                    {
                        level2.TreeLevel3.Add(new TreeLevel3ViewModel
                        {
                            Id = k,
                            Name = $"Level2 {i}{j}{k}"
                        });
                    }

                    level1.TreeLevel2.Add(level2);
                }

                list.Add(level1);
            }
            return list;
        }

From there I want to data-bind this data to the TreeView:

<div id="example">

    <div id="treeview"
         data-role="treeview"
         data-drag-and-drop="false"
         data-text-field="Name"
         data-load-on-demand="false"    
         data-bind="source: treeData">
</div>
</div>

    <script type="text/javascript">
        $(function () {
            kendo.bind($("#example"), treeViewModel);
        });
</script>

On:

var treeViewModel = kendo.observable({
    treeData: new kendo.data.HierarchicalDataSource({
        transport: {
            read: {
                url: "/api/Tree",
                type: "get",
                dataType: "json"
            }
        },
        schema: {
            data: "data",
            model: {
                id: "Id",
                title: "Name",
                expanded: false,
                children: "TreeLevel2"
            }
        }
    })
});

This works to display the first and second level, but not the third... I am not surprised as I do not specify the schema further, but when I try something like the following it doesn't work:

var treeViewModel = kendo.observable({
    treeData: new kendo.data.HierarchicalDataSource({
        transport: {
            read: {
                url: "/api/Tree",
                type: "get",
                dataType: "json"
            }
        },
        schema: {
            data: "data",
            model: {
                id: "Id",
                title: "Name",
                expanded: false,
                children: {
                    schema: {
                        data: "TreeLevel2",
                        model: {
                            id: "Id",
                            title: "Name",
children: ...
                    }
                }
            }
        }
    })
});


Viewing all articles
Browse latest Browse all 84751

Latest Images

Trending Articles



Latest Images

<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>