选择并显示在新窗口中Kendoui网格行的数据？ [英] select and show in new window Kendoui grid row data?

问题描述

我想选择一个网格行，并显示其元素的新窗口。我使用开源剑道UI电网。我可以选择。我想显示在剑道弹出窗口的详细信息。但我不能让所选行的数据。这怎么可能呢？

I tried to select a grid row and show their element in a new window. I use opensource Kendo ui grid. I can select. I want to show details in a kendo pop up window. but I can't get selected row data. How it can be?

$(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. I find to get row index. now I want to show only on pop up page. ???

推荐答案

几个问题：

• 请不要使用jQuery读取所选行的内容。而是使用的DataItem 。

• Do not use jQuery for reading the content of a selected row. Instead use dataItem.

例如：

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

• 使用内容方法在窗口分配新的内容，你可以定义模板定义应该如何看起来像：


• Use content method in the window for assigning the new content and you can define a template for defining how it should looks like:

HTML（模板）：

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

JavaScript的：

JavaScript:

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



• 定义一个窗口，然后用打开和关闭玩显示它：


• Define a window and then play with open and close for showing it:

窗口定义：

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

电网改变选择事件处理程序：

Grid change selection event handler:

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/

这篇关于选择并显示在新窗口中Kendoui网格行的数据？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！