我有一个kendoTreeView连接到OData源，如官方网站上的演示中所示。我需要将kendoTreeView的dataSource更改为其他内容。这是带脚本的html。
当我单击更改按钮时，树会更改，但会将所有节点显示为未定义。它无法显示新的dataTextField值。当我将其还原时，它甚至可以在不设置dataTextField的情况下工作。
我需要更改树的dataSource或销毁树，将其从DOM中删除，然后添加一个新树。任何帮助或指示？
<body>
<input type="button" id="expandAllNodes" value="expandAllNodes" />
<input type="button" id="changedatasource" value="changedatasource" />
<input type="button" id="revert" value="revert" />
<span>First Tree</span>
<div id="treeview"></div>
<br/>
<span>Second Tree</span>
<div id="treeview2"></div>
<!--<div id="example" class="k-content">
<div id="treeview" class="demo-section"></div>-->
<script>
</script>
<style scoped>
#example {
text-align: center;
}
.demo-section {
display: inline-block;
vertical-align: top;
width: 320px;
height: 300px;
text-align: left;
margin: 0 2em;
}
</style>
<!--</div>-->
</body>
$(document).ready(function () {
// TreeView bound to Categories > Products > OrderDetails
var viewModel = {
self: this,
OrderDetails: {
type: "odata",
transport: {
read: {
url: function (options) {
return kendo.format("http://demos.telerik.com/kendo-ui/service/Northwind.svc/Products({0})/Order_Details", options.ProductID);
}
}
},
schema: {
model: {
hasChildren: function () {
return false;
}
}
}
},
Products: new kendo.data.HierarchicalDataSource({
type: "odata",
transport: {
read: {
url: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
}
},
schema: {
model: {
id: "ProductID",
hasChildren: "Order_Details",
children: {
type: "odata",
transport: {
read: {
url: function (options) {
return kendo.format("http://demos.telerik.com/kendo-ui/service/Northwind.svc/Products({0})/Order_Details", options.ProductID);
}
}
},
schema: {
model: {
hasChildren: function () {
return false;
}
}
}
}
}
}
}),
Categories: new kendo.data.HierarchicalDataSource({
type: "odata",
transport: {
read: {
url: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Categories"
}
},
schema: {
model: {
hasChildren: "Products",
id: "CategoryID",
children: {
type: "odata",
schema: {
model: {
id: "ProductID",
hasChildren: "Order_Details",
children: {
type: "odata",
transport: {
read: {
url: function (options) {
return kendo.format("http://demos.telerik.com/kendo-ui/service/Northwind.svc/Products({0})/Order_Details", options.ProductID);
}
}
},
schema: {
model: {
hasChildren: function () {
return false;
}
}
}
}
}
},
transport: {
read: {
url: function (options) {
return kendo.format("http://demos.telerik.com/kendo-ui/service/Northwind.svc/Categories({0})/Products", options.CategoryID);
}
}
}
}
}
}
})
}
$("#treeview").kendoTreeView({
dataSource: viewModel.Categories,
dataTextField: ["CategoryName", "ProductName", "OrderID"],
checkboxes: {
checkChildren: true
}
});
$("#treeview2").kendoTreeView({
dataSource: viewModel.Products,
dataTextField: ["ProductName", "OrderID"],
checkboxes: {
checkChildren: true
}
});
ko.applyBindings(viewModel);
$("#expandAllNodes").click(function () {
var treeView = $("#kendoTreeView").data("kendoTreeView");
treeView.expand(".k-item");
});
$("#changedatasource").click(function () {
var treeview: kendo.ui.TreeView = $("#treeview").data("kendoTreeView");
//treeview.destroy();
treeview.setOptions({ dataTextField: ["ProductName", "OrderID"] });
treeview.setDataSource(viewModel.Products);
});
$("#revert").click(function () {
var treeview: kendo.ui.TreeView = $("#treeview").data("kendoTreeView");
//treeview.setOptions({ dataTextField: ["CategoryName", "ProductName", "OrderID"] });
treeview.setDataSource(viewModel.Categories);
});
});
答案 0 :(得分：0)
将数据源设置为HierarchicalDataSource的新实例，请参见此处：http://d585tldpucybw.cloudfront.net/forums/datasource-property-update-and-refresh。 Alex Gyoshev直接链接到Dojo：http://dojo.telerik.com/@gyoshev/iJIhI。