为我的 json 数据配置 kendo ui 树视图

Question

我有以下数据：

[
{"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"}
]

有人能告诉我如何为上述数据配置 kendo ui treeview 吗？ 另外，是否可以在 kendo ui 下拉列表中使用此树视图？

更新：

这就是我目前所拥有的......

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'
});

所有项目都显示为主要类别，一个在另一个正下方。 如何让树视图使用 parentId？

Answer 1

您是否尝试将其他数据嵌入到树视图项中？如果是这样，您的 KendoTreeview 应该如下所示：

@(  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
                            )

然后使用将显示 json 的 Kendo 模板

<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>