Configure kendo ui treeview for my json data -

Configure kendo ui treeview for my json data -

i have next 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 tell how can configure kendo ui treeview above data? also, possible have treeview within kendo ui dropdownlist?

update:

this have 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 displayed main category, 1 right below other. how the treeview utilize parentid?

are trying embed within treeview item other data? if so, kendotreeview should this:

@( html.kendo().treeview() .name("treeview") .datatextfield("name") //display text .datasource(datasource => datasource .read(read => read .action("actionthatfetchesdata", "controllername") ) ) .templateid("treeview-template") //name of template )

and utilize kendo template display 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>

kendo-ui kendo-treeview