带有MVVM的Telerik Kendo UI

Question

我的视图页面(MVVM Concept)中有一个Kendo UI Grid.绑定视图模型中的数据.当我减少页面大小.

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

然后DIV为Grid和ListView 定义a :

<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 包含在一个DIVwith 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");
    }
});

重要提示:无论您为获得相同的结果而做什么,请不要每次创建和销毁网格和ListView resize.这是一种计算上昂贵的操作.

在这里看到它:http://jsfiddle.net/OnaBai/JYXzJ/3/