Question

I have a kendoui treeview displaying some data obtained from a json datasource. The treeview is working with the exception that it displays the twisty for child items even when there are no child items.

I believe this is related to my json string but at this point I don’t believe I can change it.

Here is the json string:

[{"Title":"Shared Documents","spriteCssClass":"folder","LastModified":"1/15/2013 10:42:20 AM","Items":[{"Title":"Folder 1","spriteCssClass":"folder","LastModified":"1/15/2013 10:42:20 AM","Items":[{"Title":"Subfolder 1","spriteCssClass":"folder","LastModified":"1/15/2013 10:41:52 AM","Items":[]},{"Title":"Test Tax Document.docx","spriteCssClass":"docx","LastModified":"1/15/2013 10:42:20 AM","Items":[]}]}]}]

I believe the problem is that the Items[] still exist even if there are no items.

Here is the code for my treeview…

var treeDS = new kendo.data.HierarchicalDataSource({
            data: json,
            schema: {
                model: {
                    children: "Items"
                }
            }
        });

var treeview = $("#CCA_DocLibTreeViewer_Tree").kendoTreeView({
            template: "#= item.Title # - #= item.LastModified # <a href='\\#'>View</a>",
            dataSource: treeDS,
            dataTextField: ["Title", "Title"]
        }).data("kendoTreeView");

Any thoughts on what I can do about this?

Answer 1

You are right, the question is that if it has Items no matter the length it assumes that has children.

The solution is either do not generate those empty Items or define treeDS as:

var treeDS = new kendo.data.HierarchicalDataSource({
    data  : json,
    schema: {
        model: {
            children   : "Items",
            hasChildren: function (node) {
                return (node.Items && node.Items.length > 0);
            }
        }
    }
});

You can see that I have defined a hasChildren function that verifies that node.Items exists and its length is actually greater than 0.

You might see it running in JSFiddle here