在KendoUI列表中顯示KendoUI窗口查看

Question

我是KendoUI的新用戶，我想在ListView中顯示一小部分數據，但我想要一個按鈕或一個鏈接，當我點擊它時，我希望它在窗口中顯示我的項目的完整數據，我希望有人能幫助我。 在此先感謝。

Answer 1

給出下面的數據源：

var dataSource = new kendo.data.DataSource({ 
    transport: { 
     read: { 
      url  : ... 
     } 
    }, 
    schema : { 
     model: { 
      id : "ProductID", 
      fields: { 
       ProductID : { nullable: true }, 
       ProductName : { type: "string" }, 
       UnitPrice : { type: "number" }, 
       Discontinued: { type: "boolean" }, 
       UnitsInStock: { type: "number" } 
      } 
     } 
    } 
}); 

定義了一系列的字段：ProductID，ProductName ...我想顯示ProductName，所以我的模板是：

<script type="text/x-kendo-tmpl" id="template"> 
    <div class="product-view k-widget ob-product-view"> 
     <div class="edit-buttons"> 
      <a class="k-button k-button-icontext" href="\\#" id="${uid}"> 
       <span class="k-icon k-i-search"></span> 
      </a> 
     </div> 
     <dl> 
      <dt>Product Name</dt> 
      <dd>#:ProductName#</dd> 
     </dl> 
    </div> 
</script> 

顯示一個按鈕，我包括該字段的uid作爲id。這將允許我在單擊按鈕時檢索項目。

我定義了一個窗口：

<div id="ob-win" class="product-view k-widget"> 
    <dl> 
     <dt>Unit Price</dt> 
     <dd data-bind="text: UnitPrice"></dd> 
     <dt>Units In Stock</dt> 
     <dd data-bind="text: UnitsInStock"></dd> 
     <dt>Discontinued</dt> 
     <dd data-bind="text: Discontinued"></dd> 
    </dl> 
</div> 

，我把它創建爲：

var win = $("#ob-win").kendoWindow({ 
    title : "Details", 
    visible: false 
}).data("kendoWindow"); 

使得它最初是隱藏的。

然後我創建按鈕作爲處理程序：

$(document).on("click", ".k-button-icontext", function (e) { 
    var uid = $(this).attr("id"); 
    var elem = listView.dataSource.getByUid(uid); 
    kendo.bind($("#ob-win"), elem); 
    win.open().center(); 
}); 

即得到所點擊元件的uid，然後從使用存儲在id的uid數據源獲取數據，並將該數據結合到之前創建的窗口。最後，我打開窗戶，以防萬一它靠近。

這裏運行一個例子：http://jsfiddle.net/OnaBai/YmRpa/