選擇並顯示在新窗口Kendoui網格行數據？

Question

我試圖選擇一個網格行並在新窗口中顯示它們的元素。我使用開源Kendo UI網格。我可以選擇。我想在kendo彈出窗口中顯示細節。但我無法獲得選定的行數據。它是如何的？

$(document).ready(function() { 
     $("#grid").kendoGrid({ 
      sortable: true, 
      pageable: { 
       refresh: true, 
       pageSizes: [5, 10, 100] 
      }, 
      autoBind: true, 
      height: 500, 
      selectable: "row", 
      dataSource: { 
       transport: { 
        read: "/Raporlama/Getdata", 
        type: "json" 
       }, 
      }, 
      change: function(e) { 

       var username = this.select().closest("tr").find("td:eq(0)").text(); 
       var loc = this.select().closest("tr").find("td:eq(1)").text(); 
       var dev = this.select().closest("tr").find("td:eq(2)").text(); 
       var com = this.select().closest("tr").find("td:eq(3)").text(); 
       //show in a window. 
      }, 
      columns: [ 
          { field: "username", title: "@Resources.reportColumnUser", width: "80px" }, 
          { field: "location", title: "@Resources.reportColumnLoc", width: "80px" }, 
          { field: "devices", title: "@Resources.reportColumnDevice", width: "80px" }, 
          { field: "command", title: "@Resources.reportColumnCom", width: "80px" }] 


}); 

---

編輯。我發現獲取行索引。現在我只想在彈出的頁面上顯示。 ???

Answer 1

幾個問題：

• 不要讀所選行的內容使用jQuery。請使用dataItem。

例子：

change: function(e) { 
    var item = this.dataItem(this.select()); 
    console.log("item", item); 
    ... 
}, 

• 使用content方法在window分配新的內容，你可以定義應該如何看起來定義template，如：

HTML（模板）：

<script id="my-template" type="text/kendo-template"> 
    <div>#= username #</div> 
    <div>#= location #</div> 
    <div>#= devices #</div> 
    <div>#= command #</div> 
</script> 

的JavaScript：

var template = kendo.template($("#my-template").html()); 

• 定義一個窗口，然後用open和close發揮出它：

窗口定義：

var win = $("#my-win").kendoWindow({ 
    title : "Selected Data" 
}).data("kendoWindow"); 

電網改變選擇事件處理程序：

change: function(e) { 
    var item = this.dataItem(this.select()); 
    console.log("item", item); 
    //show in a window. 
    win.content(template(item)); 
    win.open(); 
}, 

運行例如這裏：http://jsfiddle.net/OnaBai/Tk2YA/2/