0

我在页面上有一个剑道 ui 标签条。每个页面都必须显示来自不同数据源的网格。我正在使用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 的选项卡更改上更改数据源？？？

4

1 回答 1

1

为了改变DataSource你Grid应该使用的setDataSource方法：

grid.setDataSource(new_datasource);

为了检测选项卡更改，您应该将处理程序绑定到activate事件TabStrip

所以，它应该是这样的：

$("#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是 aGrid并将其绑定到包含该选项卡 ( 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/

于 2014-06-17T10:11:31.927 回答