Kendo UI Treeview and JSON

Question

So I want to create a Tree with kendo UI treeview item and bind it to a remote Hierarchical Data Source being a JSON file.

I want the resulting tree to be something like:

(Vehicles)

--(Cars)

----FM-1100

----FM-4200

--(Bikes)

----FM-3100

(Personnel)

--(Clients)

----GH-3000

--(VIPs)

----GH-3100

PS. Names in () are supposed to be something like folders containing their "children"

I've checked the documentation about all the above in the kendo ui website but I'm a bit confused with the whole callback function the treeview uses to load the deeper stages everytime you expand an item in the tree..

Let's take the example in kendo documentation for instance:

var homogeneous = new kendo.data.HierarchicalDataSource({
transport: {
    read: {
        url: "http://demos.kendoui.com/service/Employees",
        dataType: "json"
    }
},
schema: {
    model: {
        id: "EmployeeId",
        hasChildren: "HasEmployees"
    }
}
});

$("#treeview").kendoTreeView({dataSource: homogeneous});

JSON sample data:

    {
"employees": [
{"EmployeeId":2,"FullName":"Andrew Fuller","HasEmployees":true,"ReportsTo":null},
{"EmployeeId":3,"FullName":"Carl Jenkins","HasEmployees":true,"ReportsTo":null},
{"EmployeeId":4,"FullName":"Aston Miller","HasEmployees":false,"ReportsTo":2},
{"EmployeeId":5,"FullName":"Damon Sherbands","HasEmployees":false,"ReportsTo":2},
{"EmployeeId":6,"FullName":"Dariel Hanks","HasEmployees":true,"ReportsTo":null},
{"EmployeeId":7,"FullName":"Jason Jackson","HasEmployees":false,"ReportsTo":3},
{"EmployeeId":8,"FullName":"Reylen Scribbs","HasEmployees":false,"ReportsTo":6}
]
}

So,I have to setup a rest server on "http://demos.kendoui.com/service/Employees" that accepts a GET from the tree which provides the "EmployeeId" and then does a search inside the file and returns those who "ReportTo" the "EmployeeId" recieved...?? And what happens the firt time the tree wants to show the initial nodes?

Something like:

@Path("/Employees")
@GET
@Produces(MediaType.TEXT_HTML)
public String returnEmployees(@QueryParam("EmployeeId") int accID) {
    //search the employees.json
    return "<head></head><body><pre>" + searchResultsString + "</pre></body>";
}

How do I search efficiently a JSON file and return all the results in a String? Or if all these are wrong can someone help me understanding all the GET and the callback stuff?Maybe it does have to do with jsonp I've heard about?A bit lost here..

Thanks in advance

OnaBai OnaBai · Accepted Answer · 2012-11-08T13:21:20

Are you able to create a JSON file with the following structure (similar to what you propose in XML format)?

[
    {
        "id"   :100,
        "text" :"tree",
        "items":[
            {
                "id"   :1,
                "text" :"Vehicle",
                "items":[
                    {
                        "id"   :2,
                        "text" :"Cars",
                        "items":[
                            {
                                "id"  :3,
                                "text":"FM-1100"
                            },
                            {
                                "id"  :4,
                                "text":"FM-4200"
                            }
                        ]
                    },
                    {
                        "id"   :5,
                        "text" :"Bikes",
                        "items":[
                            {
                                "id"  :6,
                                "text":"FM-3100"
                            }
                        ]
                    }
                ]
            },
            {
                "id"   :7,
                "text" :"Personnel",
                "items":[
                    {
                        "id"   :8,
                        "text" :"Personnel",
                        "items":[
                            {
                                "id"   :9,
                                "text" :"Clients",
                                "items":[
                                    {
                                        "id"  :10,
                                        "text":"GH-3000"
                                    }
                                ]
                            },
                            {
                                "id"   :11,
                                "text" :"VIPs",
                                "items":[
                                    {
                                        "id"  :12,
                                        "text":"GH-3100"
                                    }
                                ]
                            }
                        ]
                    }
                ]
            }
        ]
    }
]

Where each element has an id a text that is what will show up in the tree and an array items containing each subelement of the tree.

If so, your code should be:

$.getJSON("/testTree.json", function (data) {
    $("#treeview").kendoTreeView({
        dataSource: data
    });
})

Where /testTree.json is the URL of your JSON file.

Kendo UI Treeview and JSON

3 Answers