select and show in new window Kendoui grid row data?

问题

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. ???

回答1:

A couple of questions:

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

Example:

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 (template):

<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());

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

Window definition:

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();
},

Running example here : http://jsfiddle.net/OnaBai/Tk2YA/2/

来源：https://stackoverflow.com/questions/21428986/select-and-show-in-new-window-kendoui-grid-row-data

标签

asp.net-mvc

kendo-ui

kendo-grid