选择并在新窗口中显示kendoui网格行数据

Question

我尝试选择一个网格行，并在新窗口中显示其元素。我使用Opensource 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" }]

});

---

EDİT。我发现要获得行索引。现在，我只想在弹出页面上显示。???

Answer 1

几个问题：

• 请勿使用jQuery读取所选行的内容。而是使用dataItem。

示例：

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

• 使用window中的content方法来分配新内容，您可以定义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/