Kendo: How do I create a recursive hieiarchy in the TreeView?

Question

I am using Kendo UI and trying to figure out how to get the TreeView to display a recursive hierarchy. Firstly, here is my model (I am retrieving a list of these objects by OData):

public class PageTreeItem
    {
        public Guid Id { get; set; }

        public string Name { get; set; }

        public bool IsEnabled { get; set; }

        public PageTreeItem[] SubPages { get; set; }
    }

And here is my JavaScript:

var PagesDS = new kendo.data.HierarchicalDataSource({
        type: "odata",
        transport: {
            read: {
                url: "/odata/cms/PageTree",
                dataType: "json"
            }
        },
        schema: {
            data: function (response) {
                return response.value;
            },
            total: function (response) {
                return response.value.length;
            },
            model: {
                id: "Id",
                children: "SubPages"
            }
        }
    });

    PagesDS.read();

    $("#treeview").kendoTreeView({
        template: kendo.template($("#treeview-template").html()),
        dataSource: PagesDS,
        dataTextField: ["Name"]
    });

And finally, the markup:

<div id="treeview"></div>

<script id="treeview-template" type="text/kendo-ui-template">
        <a href="javascript:void(0)" onclick="viewModel.edit('#=item.Id#')">#= item.Name #</a>
    </script>

I can only ever get the top-level items to display. Obviously, setting the "children" property in schema-> model is not working. How do I achieve what I want?

score 0 · Accepted Answer · answered Apr 09 '15 at 04:06

OK, ignore.. my problem was with the SubPages not actually being returned in the first place... oops! I simply assumed they were automatically serialized with everything else. I needed to provide the $expand option in my OData query, as follows:

read: {
                url: "/odata/cms/PageTree?$expand=SubPages",
                dataType: "json"
            }

Kendo: How do I create a recursive hieiarchy in the TreeView?

1 Answers1