Question

我有一个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);

    });
});

Answer 1

将数据源设置为HierarchicalDataSource的新实例，请参见此处：http://d585tldpucybw.cloudfront.net/forums/datasource-property-update-and-refresh。 Alex Gyoshev直接链接到Dojo：http://dojo.telerik.com/@gyoshev/iJIhI。

kendo treeview动态更改数据源

1 个答案: