kendo ui - 在选项卡更改时更改数据源答案

【问题标题】：kendo ui - change datasource on tab changekendo ui - 在选项卡更改时更改数据源
【发布时间】：2014-06-17 07:41:48
【问题描述】：

我在页面上有一个剑道用户界面标签条。每个页面都必须显示来自不同数据源的网格。我正在使用kendo-mvvm 模式。

var customderDetails = kendo.observable({
            // properties of customer-details
        // how do i different datasources on tab change 
    });
kendo.bind($('#addCustomerDetailsContent'), customderDetails);

addCustomerDetailsContent 有带有 5 个标签的标签条。

如何在 tabstrip 的选项卡更改时更改数据源？？？

【问题讨论】：

标签： kendo-ui kendo-grid kendo-mvvm kendo-tabstrip

【解决方案1】：

我要更改Grid 的DataSource 你应该使用setDataSource 方法：

grid.setDataSource(new_datasource);

为了检测标签更改，您应该将处理程序绑定到TabStrip 上的activate 事件

所以，它应该是这样的：

$("#tabs").kendoTabStrip({
    activate: function (e) {
        // Compute new DataSource for this tab
        var aux = ...
        $("#grid").data("kendoGrid").setDataSource(aux);
    }
}).data("kendoTabStrip");

在下面的 JSFiddle 中，我展示了如何切换选项卡外的网格：http://jsfiddle.net/OnaBai/6Cuyr/

但是有一个问题 - 你原来的问题不清楚 - 网格是否是选项卡。如果它实际上在选项卡中，我建议您使用与选项卡一样多的不同网格，然后您不必切换数据源（设置新数据源总是有相关的价格），然后您可以执行以下操作：

HTML：

<div id="tabs" data-role="tabstrip">
    <ul>
        <li>ds1</li>
        <li>ds2</li>
        <li>ds3</li>
    </ul>
    <div>
        <div data-role="grid" data-bind="source: ds1"></div>
    </div>
    <div>
        <div data-role="grid" data-bind="source: ds2"></div>
    </div>
    <div>
        <div data-role="grid" data-bind="source: ds3"></div>
    </div>
</div>

即定义 TabStrip 的内容是 Grid 并将其绑定到包含该选项卡数据源的模型成员 (data-bind="source: ds1">)。

那么，JavaScript 将是：

var mvvm = kendo.observable({
    ds1 : new kendo.data.DataSource({
        data    : ...
    }),
    ds2: new kendo.data.DataSource({
        data    : ...
    }),
    ds3 : new kendo.data.DataSource({
        data    : ...
    })
});

// Bind TabStrip to our observable object mvvm
kendo.bind($("#tabs"), mvvm);

你可以在下面的 JSFiddle 中看到它：http://jsfiddle.net/OnaBai/6Cuyr/3/

【讨论】：