kendo-ui - MVVM を使用したテレリック剣道 UI

Question

ビュー ページ (MVVM コンセプト) に剣道 UI グリッドが 1 つあります。ビューモデルからデータをバインドします。ページサイズを縮小したとき。

剣道 UI グリッドが剣道 UI リストビューに変更されました。この画像を参照してください。

これどうやってするの？

Answer 1

Grid と ListView の両方に 1 つの DataSource を定義します。

var ds = {
    data    : ...,
    pageSize: 10,
    schema  : {
        model: {
            fields: {
                Id       : { type: 'number' },
                FirstName: { type: 'string' },
                LastName : { type: 'string' },
                City     : { type: 'string' }
            }
        }
    }
};

DIV次に、Grid と ListView の両方を定義します。

<div id="grid"></div>
<div id="list"></div>

Grid と ListView を初期化します。

$("#grid").kendoGrid({
    dataSource: ds,
    columns   :
    [
        { field: "FirstName", width: 90, title: "First Name" },
        { field: "LastName", width: 200, title: "Last Name" },
        { field: "City", width: 200 }
    ]
});

$("#list").kendoListView({
    dataSource: ds,
    template : $("#template").html()
});

ここで、幅に応じてどちらかを表示する必要があります。

// Display Grid (and hide ListView)
$("#grid").removeClass("ob-hidden");
$("#list").addClass("ob-hidden");

// Display ListView (and hide Grid)
$("#grid").addClass("ob-hidden");
$("#list").removeClass("ob-hidden");

CSS クラスの場所ob-hidden:

.ob-hidden {
    display: none;
    visibility: hidden;
    width: 1px;
}

さて、残っている唯一の質問は、幅に応じてどちらかを呼び出すことです。変更を検出するためにjQueryresizeイベントを使用できます。

したがって、ListView と Grid の両方をDIVwithidコンテナーで囲みます。

<div id="container">
    <div id="grid"></div>
    <div id="list" class="ob-hidden"></div>
</div>

resizeハンドラを次のように定義します。

$("window").on("resize", function(e) {
    var width = $("#container").width();
    console.log(width);
    if (width < 300) {
        console.log("list");
        $("#grid").addClass("ob-hidden");
        $("#list").removeClass("ob-hidden");
    } else { 
        console.log("grid");
        $("#grid").removeClass("ob-hidden");
        $("#list").addClass("ob-hidden");
    }
});

重要: これと同じ結果を得るために何をしても、resize. これは計算コストの高い操作です。

実際の動作はこちら: http://jsfiddle.net/OnaBai/JYXzJ/3/