使用简单的分层数据源在 Kendo TreeView 中设置显示名称

Question

我在显示或映射 Kendo TreeView 的父对象和子对象的显示名称时遇到问题。

以下用作数据源的基本设置：

<div id="list-of-devices"</div>

// somewhere in my script
var inline = new kendo.data.HierarchicalDataSource({
    data: [
        {
            "DeviceGroupId": 1,
            "DeviceGroupName": "Superdeluxe Devices",
            "Devices": [
                {
                    "DeviceId": 1000,
                    "DeviceName": "My First Device"
                },
                {
                    "DeviceId": 1001,
                    "DeviceName": "My Second Device"
                }
            ]
        }
    ],
    schema: {
        model: {
            children: "Devices"
        }
    }

});

当我直接使用 .kendoTreeview 函数初始化树视图时，它起作用了。像这样：

// initialize the treeview
$("#list-of-devices").kendoTreeView({
    dataSource: inline,
    dataTextField: ["DeviceGroupName", "DeviceName"]
});

这部分的神奇之处在于最后一行代码，我在其中为组和子项设置了不同的 dataTextField。同样，这有效！

但是，如果我将其转换为 MVVM 示例，我不确定如何正确设置它。

MVVM 示例：

<div id="container">
    <div id="list-of-devices" class="devices"
         data-role="treeview"
         data-text-field="dataTextField" <!-- HOW TO DO THIS? -->
         data-bind="source: data">
     </div>
 </div>

var viewModel = kendo.observable({
    data: inline,
    dataTextField: ["DeviceGroupName", "DeviceName"] // <-- HOW TO DO THIS?
});

kendo.bind($("#container"), viewModel);

虽然它确实有效，例如不会抛出任何错误，所有标签在我的树视图中都显示为 "undefined"。

问题是：如何相应地设置或绑定 dataTextField 以使树视图正确显示组和子项的名称？

Answer 1

基本上，您应该将其定义为：

<div id="list-of-devices" class="devices"
     data-role="treeview"
     data-text-field="['DeviceGroupName', 'DeviceName']"
     data-bind="source: data">
 </div>

将 data-text-field 设置为值，就好像它是一个 JavaScript 数组但在引号之间。无需在 ObservableObject.

中定义它

在这里查看：http://jsfiddle.net/OnaBai/38pk73ty/

使用简单的分层数据源在 Kendo TreeView 中设置显示名称

Setting display names in a Kendo TreeView, with a simple hierarchical datasource

mvvm

kendo-ui

kendo-treeview