выбрать и показать в новом окне Kendoui grid row data?

Question

Я попытался выбрать строку сетки и показать их элемент в новом окне. Я использую сетку Kendo ui с открытым исходным кодом. Я могу выбрать. Я хочу показать детали в всплывающем окне кендо. но я не могу получить выбранные данные строки. Как это может быть?

$(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/