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

Question

我在一页上有一个kendo 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个选项卡的选项卡。

如何更改选项卡上的数据源？

Answer 1

若要更改DataSource of Grid，应使用setDataSource方法：

grid.setDataSource(new_datasource);

为了检测选项卡更改，应该将处理程序绑定到TabStrip上的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/

，但，在您最初的问题上，问题-not是清楚的--如果网格是选项卡还是非选项卡。如果它实际上在选项卡中，我建议使用与选项卡相同的不同网格，然后您不必切换数据源(设置新数据源总是需要付出一定的代价)，然后您可以这样做：

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/