CODEWITHSUNDEEP
javascripthtmlmodel-view-controllerkendo-ui
James
James

Reputation: 4354

Kendo UI KendoTreeView HierarchicalDataSource not showing nodes

My Kendo UI TreeView is not getting the returned JSON objects added to the treeview.

I can see from the controller method that gets called that the Json being given to the DataSource looks like this (but with more files and folders)

{"NodeID":-842352767, "Name":"/", "Folders":[{"NodeID":1804712307,"Name":"/$Recycle.Bin","Folders":null,"Files":null},{"NodeID":-582712839,"Name":"/Windows","Folders":null,"Files":null}], "Files":["/.rnd","/msdia80.dll"]}

My view is as follows:

@model ProjName.Models.BrowseNode

<div id ="wrapper">
<h1>Browser</h1>
<div id="treeview" style="float:left;margin: 40px;">
</div>
</div>
<script>
function populateTreeView() {
    var remoteDataSource = new kendo.data.HierarchicalDataSource({
        type: "json",
        transport: {
            read: "FileBrowser/GetHierarchy"
        },
        schema: {
            model: {
                id: "NodeID",
                text: "Name",
                expanded: false,
                children: "Folders",
            },
        }
    });

    $("#treeview").kendoTreeView({
        dataSource: remoteDataSource,
        dataTextField: "Name"
    });
}

$(document).ready(function () {
    populateTreeView();
});

With BrowseNode defined as:

public class BrowseNode
{
    public int NodeID { 
        get
        {
            if (null == Name)
                return default(int);
            return Name.GetHashCode();   
        }
    }
    public string Name { get; set; }
    public List<BrowseNode> Folders { get; set; }
    public List<string> Files { get; set; }
}

Anything obviously wrong or any tips for debugging this sort of thing?

Upvotes: 0

Views: 2987

Answers (1)

James
James

Reputation: 4354

It turned out my JSON wasn't what the DataSource wanted. It should have been an array returned at the top level, so the JSON is surrounded by [ ] brackets as follows:

[{"NodeID":-842352767, "Name":"/", "Folders":[{"NodeID":1804712307,"Name":"/$Recycle.Bin","Folders":null,"Files":null},{"NodeID":-582712839,"Name":"/Windows","Folders":null,"Files":null}], "Files":["/.rnd","/msdia80.dll"]}]

Upvotes: 1

Related Questions