单击 Kendo Grid 行并打开一个新的 Grid Window答案

【问题标题】：Click on Kendo Grid row and open a new Grid Window单击 Kendo Grid 行并打开一个新的 Grid Window
【发布时间】：2016-01-04 01:57:44
【问题描述】：

我有一个可以很好地与所有 CRUD 功能配合使用的网格。我想要做的是单击该网格的任何行并打开一个新的网格窗口弹出，请记住弹出我们的网格必须具有单击的行的 ID。任何人都有任何想法。我搜索了telerik论坛，什么也没有。

【问题讨论】：

弹出网格窗口，什么意思？是编辑窗口吗？就像你在这个网格中按下行的编辑按钮一样？ plnkr.co/edit/lPUzfu?p=preview

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

【解决方案1】：

请尝试以下代码 sn-p。

<!DOCTYPE html>
<html>
<head>
    <base href="http://demos.telerik.com/kendo-ui/treelist/local-data-binding">
    <style>
        html {
            font-size: 14px;
            font-family: Arial, Helvetica, sans-serif;
        }
    </style>
    <title>Jayesh Goyani</title>
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.2.902/styles/kendo.common-bootstrap.min.css" />
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.2.902/styles/kendo.bootstrap.min.css" />

    <script src="//kendo.cdn.telerik.com/2015.2.902/js/jquery.min.js"></script>
    <script src="//kendo.cdn.telerik.com/2015.2.902/js/kendo.all.min.js"></script>
</head>
<body>

    <div id="grid"></div>
    <div id="window"></div>
    <script>
        $(document).ready(function () {
            var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service",
                dataSource = new kendo.data.DataSource({
                    transport: {
                        read: {
                            url: crudServiceBaseUrl + "/Products",
                            dataType: "jsonp"
                        },
                        update: {
                            url: crudServiceBaseUrl + "/Products/Update",
                            dataType: "jsonp"
                        },
                        destroy: {
                            url: crudServiceBaseUrl + "/Products/Destroy",
                            dataType: "jsonp"
                        },
                        create: {
                            url: crudServiceBaseUrl + "/Products/Create",
                            dataType: "jsonp"
                        },
                        parameterMap: function (options, operation) {
                            if (operation !== "read" && options.models) {
                                return { models: kendo.stringify(options.models) };
                            }
                        }
                    },

                    pageSize: 20,
                    schema: {
                        model: {
                            id: "ProductID",
                            fields: {
                                ProductID: { editable: false, nullable: true },
                                ProductName: { validation: { required: true } },
                                UnitPrice: { type: "number", validation: { required: true, min: 1 } },
                                Discontinued: { type: "boolean" },
                                UnitsInStock: { type: "number", validation: { min: 0, required: true } }
                            }
                        }
                    }
                });

            $("#grid").kendoGrid({
                dataSource: dataSource,
                pageable: true,
                height: 550,
                dataBound: onDataBound,
                toolbar: ["create"],
                columns: [
                    //"ProductID",
                    "ProductName",
                    { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "120px" },
                    { field: "UnitsInStock", title: "Units In Stock", width: "120px" },
                    { field: "Discontinued", width: "120px" },
                    { command: ["edit", "destroy"], title: "&nbsp;", width: "250px" }],
                editable: "inline"
            });

            $("#window").kendoWindow({
                modal: true,
                width: "505px",
                height: "315px",
                title: "Rams's Ten Principles of Good Design",
                actions: ["Pin", "Refresh", "Maximize", "Close"],
                visible: false
            });



        });
        function onDataBound(e) {
            var grid = $("#grid").data("kendoGrid")
            $(grid.tbody).off('click');
            $(grid.tbody).on("click", "tr", function (e) {
                var row = $(this);
                var grid = $("#grid").getKendoGrid();
                var dialog = $("#window").data("kendoWindow");
                dialog.open();
                dialog.center();
                dialog.content(grid.dataItem(row).ProductID)

            });
        }
    </script>
</body>
</html>

请查看this 链接以在 kendo-grid 中添加“数据绑定”事件。

如果有任何问题，请告诉我。

【讨论】：