0

ページに剣道UIタブストリップがあります。各ページには、異なるデータソースからのグリッドを表示する必要があります。kendo-mvvmパターンを使用しています。

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

addCustomerDetailsContent5 つのタブを持つタブストリップがあります。

タブストリップのタブ変更時にデータソースを変更するにはどうすればよいですか???

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その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/

于 2014-06-17T10:11:31.927 に答える