CODEWITHSUNDEEP
jqueryjsonkendo-uitreeviewkendo-treeview
Sunden
Sunden

Reputation: 863

Bind remote JSON Data to a Kendo TreeView - only getting first tier

I'm currently trying to get a Kendo TreeView to display some JSON data.

var treeViewDataSource = new kendo.data.HierarchicalDataSource({
        transport: {
            read: {
                url: "/Utilities/Tool/Get/TreeView",
                type: "get",
                dataType: "json"
            }
        }
    });

    $("#tree-view").kendoTreeView({
        loadOnDemand: false,
        dataSource: treeViewDataSource,
        select: onSelect
    });

Where my JSON Data looks like this:

[{
    "text": "CREATE",
    "description": "Create Transaction",
    "items": [
        {
            "text": "PSEUDO",
            "feature": "CREATE",
            "items": [
                {
                    "text": "FIX",
                }
            ],
            "nodeChildren": 1
        }
    ],
    "nodeChildren": 1
},
{
    "text": "DATA",
    "description": "Data Report",
    "items": [],
    "nodeChildren": 0
}]

Now, the weird part is that if I copy and paste the above JSON data into the kendo DataSource instead of calling for it remotely, the TreeView displays the data just fine. When I call for the data remotely instead, the TreeView only display the first tier of nodes and looks something like this:

CREATE

DATA

For a brief second while the table is loading, the little arrows that designate whether a node has children is visible, but these soon disappear. I'm not sure what's going on and the Kendo Documentation is not very helpful. Why is Kendo not reading this data properly? I'm using Postman to test the API and the JSON looks perfectly fine to me, and works if copied in locally. What gives?

Thanks

Upvotes: 0

Views: 1231

Answers (1)

Sunden
Sunden

Reputation: 863

I've found a solution to my problem, all I had to do was mess with the schema, although I still don't fully understand what/how schema works.

var treeViewDataSource = new kendo.data.HierarchicalDataSource({
        transport: {
            read: {
                url: "/Utilities/Tool/Get/TreeView",
                type: "get",
                dataType: "json"
            }
        },
        schema: {
            model: {
                children: "items"  
            }
        }
    });

All I had to do was define the children field.

Upvotes: 1

Related Questions