Question

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

Answer 1

请尝试使用以下代码段。

<!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链接以添加＆＃34;数据绑定＆＃34;剑道网中的事件。

如果有任何疑虑，请告诉我。

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

1 个答案: