What data format does KendoTreeView require in second hierarchy?

Question

I am using KendoUI Web and have set up a TreeView with two levels of hierarchy which are loading data from a CRUD service using the transport option of the DataSource:

var Level2 = kendo.data.Node.define({
    id: "Level2_Id",
    hasChildren: false,
    fields: {
        "Level2_Id": { type: "number" },
        "Name":      { type: "string" },
        "Level1_Id": { type: "number" }
    }
});

var level2DataSource = {
    transport: {
        read: {
            url: "/service/level2",
            type: "get",
            dataType: "json"
        },
        create: {
            url: "/service/level2",
            type: "post",
            dataType: "json"
        }                    
    },
    schema: {
        model: Level2
    }
};

var Level1 = kendo.data.Node.define({
    id: "Level1_Id",
    hasChildren: true,
    fields: {
        "Level1_Id": { type: "number" },
        "Name":      { type: "string" },
    },
    children: level2DataSource,
});

var level1DataSource = new kendo.data.HierarchicalDataSource({
    transport: {
        read: {
            url: "/service/level1",
            type: "get",
            dataType: "json"
        },
        create: {
            url: "/service/level1",
            type: "post",
            dataType: "json"
        }
    },
    schema: {
        model: Level1
    }
});

var myTreeview = $("#treeview").kendoTreeView({
    dataSource: leaguesDataSource,
    template: kendo.template($("#treeview-template").html())
});

Reading the data works fine on both levels.

Creating new items is done by calling .append() on the TreeView and then .sync() on the level 1 DataSource. This results in a POST request to my service which returns the new JSON object. The tree view updates just fine.

However, when doing the same thing on level 2, the treeview will remove all items and only show level 2 children of the level 1 item that the new item was appended to.

The GET requests return a JSON array of level 1 or level 2 items like

result of /service/level1
[
    {Level1_Id:1,Name:"Item 1"},
    {Level1_Id:2,Name:"Item 2"},
    {Level1_Id:3,Name:"Item 3"},
]

result of /service/level2
[
    {Level2_Id:1,Name:"Item 2.1",Level1_Id:2},
    {Level2_Id:2,Name:"Item 2.2",Level1_Id:2}
]

The POST requests return a single object of the same format.

What format do I need to return in my service so the treeview will update correctly on level 2 after appending an item?

Expected result:

- Item 1
- Item 2 (append here)
    - Item 2.1
    - Item 2.2 (new item)
- Item 3

Actual result after POST request:

- Item 2.1
- Item 2.2 (new item)

maliness maliness · Accepted Answer · 2015-09-22T12:13:45

your syntax it not right. your must write

schema:{model:{id: "IdLevel", children: "items", hasChildren: "hasChildren"}}

with hierarchical data.

For example you must have your data like this :

 [
{ categoryName: "SciFi", items: [
  { movieName: "Inception", rating: 8.8 },
  { movieName: "The Matrix", rating: 8.7 }
] },
{ categoryName: "Drama", hasAssignedMovies: true }]

What data format does KendoTreeView require in second hierarchy?

1 Answers