从Kendo Grid Data填充Kendo TreeView

时间:2013-07-02 20:17:58

标签: kendo-ui kendo-grid kendo-treeview

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

用户从下拉列表中选择某个内容并点击按钮 - >网络服务电话 - >使用来自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()之外,哪个是正确的事件/方法,我应该用我的逻辑?

1 个答案:

答案 0 :(得分:0)

我认为你应该使用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);
}

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