选择并在新窗口中显示 Kendoui 网格行数据？答案

【问题标题】：select and show in new window Kendoui grid row data?选择并在新窗口中显示 Kendoui 网格行数据？
【发布时间】：2014-01-29 10:58:17
【问题描述】：

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


});

EDİT. 我发现要获取行索引。现在我只想在弹出页面上显示。？？？

【问题讨论】：

标签： asp.net-mvc kendo-ui kendo-grid

【解决方案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/

【讨论】：