Question

我在页面上有一个kendo ui tabstrip。每个页面都必须显示来自不同数据源的网格。我正在使用kendo-mvvm模式。

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

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

如何在标签栏的标签更改上更改数据源???

Answer 1

如果要更改DataSource的{{1}}，您应该使用Grid方法：

setDataSource

为了检测标签更改，您应该将处理程序绑定到grid.setDataSource(new_datasource);上的activate事件

所以，它应该是这样的：

TabStrip

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

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

HTML：

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

即。定义<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）。

然后，JavaScript将是：

data-bind="source: ds1">

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

kendo ui - 更改选项卡上的数据源

1 个答案: