Telerik Kendo UI 与 MVVM

Question

我的视图页面中有一个 Kendo UI Grid（MVVM 概念）。绑定来自视图模型的数据。当我减小页面大小时。

Kendo UI 网格更改为 Kendo UI Listview。看这张图片：

我该怎么做？

Answer 1

为 Grid 和 ListView 定义一个 DataSource。

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

然后为 Grid 和 ListView 定义 DIV：

<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;
}

现在，剩下的唯一问题是根据宽度调用一个或另一个。您可以使用 jQuery resize 事件来检测更改。

因此，将 ListView 和 Grid 包含在 DIV 和 id 容器中：

<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 时创建和销毁Grid 和ListView。这是一个计算量很大的操作。

在此处查看实际操作：http://jsfiddle.net/OnaBai/JYXzJ/3/