MVVM的Telerik Kendo UI

Question

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

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，并为ListView：

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

并初始化网格和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事件来检测更改。

所以，请用一个DIV都ListView和网格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/