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/