Configure kendo ui treeview for my json data - kendo-ui

Question

I have the following data:
[
{"id":1,"parendId":0,"name":"Foods","hasItems":"true},
{"id":2,"parentId":1,"name":"Fruits","hasItems":"true"},
{"id":3,"parentId":1,"name":"Vegetables","hasItems":"true"},
{"id":4,"parentId":2,"name":"apple","hasItems":"false"},
{"id":5,"parentId":2,"name":"orange","hasItems":"true"},
{"id":6,"parentId":3,"name":"tomato","hasItems":"true"},
{"id":7,"parentId":3,"name":"carrot","hasItems":"true"},
{"id":8,"parentId":3,"name":"cabbage","hasItems":"true"},
{"id":9,"parentId":3,"name":"potato","hasItems":"true"},
{"id":10,"parentId":3,"name":"lettuce","hasItems":"false"}
]
Can someone tell how I can configure kendo ui treeview for the above data?
Also, is it possible to have this treeview inside kendo ui dropdownlist?
Update:
This is what I have so far...
categories = new kendo.data.HierarchicalDataSource({
transport: {
read: {
url: UrlThatFetchesData
}
},
schema: {
model: {
id: 'id',
parentId: 'parentId',
name: 'name'
}
}
});
$('#tvCategories').kendoTreeView({
dataSource: categories,
dataTextField: 'name',
dataValueField: 'id'
});
All items are displayed as main category, one right below the other.
How do I get the the treeview to use the parentId?

Answer 1

Are you trying to embed inside the treeview item those other data? If that is so, your KendoTreeview should look like this:
#( Html.Kendo().TreeView()
.Name("Treeview")
.DataTextField("name") //display text
.DataSource(dataSource => dataSource
.Read(read => read
.Action("ActionThatFetchesData", "ControllerName")
)
)
.TemplateId("treeview-template") //name of the template
)
And then use a Kendo Template that will display the json
<script id="treeview-template" type="text/kendo-ui-template">
<span>#: item.id#</span>
<span>#: item.parentId#</span>
<span>#: item.name#</span>
<span>#: item.hasItems#</span>
</script>