从 Kendo Grid 数据填充 Kendo TreeView答案

【问题标题】：Populate Kendo TreeView from Kendo Grid Data从 Kendo Grid 数据填充 Kendo TreeView
【发布时间】：2013-07-02 20:17:58
【问题描述】：

我在同一页面上同时拥有 TreeView 和 Grid，我需要从网格数据中填充 TreeView。所以流程是这样的：

用户从下拉列表中选择一个东西并单击一个按钮 -> Web 服务调用 -> 使用来自 Web 服务的数据填充网格 -> 使用网格数据的一些按摩填充 TreeView

填充 TreeView 的逻辑目前在 grid.dataSource.fetch() 方法中，如下所示：

// this function is called when user clicks on the button
function getData() {
    grid.dataSource.read();
    grid.dataSource.page(1);

    grid.dataSource.fetch(function () {
        var data = this.data();
        ... // logic to massage the data to populate TreeView
        ...
    }
}

但是，如果用户从下拉列表中选择另一项并再次单击按钮，this.data() 似乎具有旧数据（从第一次开始），因此，TreeView 填充了旧数据。

除了 fetch() 之外，我应该使用哪个正确的事件/方法来放入我的逻辑？

【问题讨论】：

标签： kendo-ui kendo-grid kendo-treeview

【解决方案1】：

我认为你应该使用 kendoGrid 的 dataBound 事件。 http://docs.kendoui.com/api/web/grid#events-dataBound。

这里是 kendoGrid dataBound 事件处理程序的示例代码：

function Grid_DataBound(e) {
    console.log("Grid_DataBound", e);

    var grid = e.sender;
    var dataItems = grid.dataSource.view();

    console.log(dataItems);

    var treeData = new Array();

    for (var i = 0; i < dataItems.length; i++) {
        treeData.push({
            OrderId: dataItems[i].OrderID,
            ShipName: dataItems[i].ShipName 
        });
    }

    var dataSource = new kendo.data.HierarchicalDataSource({
        data: treeData,
        schema: {
            model: {
                id: "OrderId"
            }
        }
    });

    $("#treeview").data("kendoTreeView").setDataSource(dataSource);
}

如果您需要完整的示例代码，请告诉我。

【讨论】：