Kendo Grid - 在编辑中启用行的自定义命令答案

【问题标题】：Kendo Grid - Custom Command to Enable row in EditKendo Grid - 在编辑中启用行的自定义命令
【发布时间】：2014-04-03 05:07:46
【问题描述】：

我有一个使用内联编辑的 Kendo Grid。而不是使用剑道框架中可用的标准 Edit() 命令，我想要一个剑道自定义命令，当点击它时，它会找到当前行并将该行置于编辑模式。

此网格还会在网格底部添加一个新行。

注意：我正在尝试模拟批量编辑客户端。

【问题讨论】：

标签： c# javascript kendo-ui kendo-grid

【解决方案1】：

请按照这个例子：

<body>
    <h1>Kendo Grid</h1>
    <hr />
     <div id="Correspondence"></div>
    <input type="hidden" id="hdnEmployeeId" />
    <script>
        //Parent grid
        $(document).ready(function () {
            var element = $("#Correspondence").kendoGrid({
                dataSource: {
                    data: @Html.Raw(Json.Encode(Model)),
                    editable: { destroy: true },
                    batch: true,
                    pageSize: 5,
                    schema: {
                        model: {
                            id: "EmployeeId",
                            fields: {
                                EmployeeId: { type: "number" },
                                Name: { type: "string" },
                                Gender: { type: "string" },
                                City: { type: "string" }
                            }
                        }
                    }
                },
                height: 430,
                sortable: true,
                pageable: true,
                selectable: true,
                detailInit: detailInit,
                dataBound: function () {
                    this.expandRow(this.tbody.find("tr.k-master-row").first());
                },
                columns:
                        [
                            { field: "EmployeeId", title: "EmployeeId", width: "110px" },
                            { field: "Name", title: "Name", width: "110px" },
                            { field: "Gender",title: "Gender", width: "110px" },
                            { field: "City",title: "City", width: "110px" },

                        ],
                change: function () {
                    //Get the selected row id
                    alert("EmployeeId "+ this.dataItem(this.select()).EmployeeId);

                }   
            });

            //you can expand it programatically using the expandRow like this
            element.on('click', 'tr', function () {
                $(element).data().kendoGrid.expandRow($(this));
            })

            //Child grid
            function detailInit(e) {
                    $("<div/>").appendTo(e.detailCell).kendoGrid({
                    dataSource: {
                        data: @Html.Raw(Json.Encode(Model)),
                        editable: { destroy: true },
                        batch: true,
                        pageSize: 5,
                        schema: {
                            model: {
                                id: "EmployeeId",
                                fields: {
                                    EmployeeId: { type: "number" },
                                    Name: { type: "string" },
                                    Gender: { type: "string" },
                                    City: { type: "string" }
                                }
                            }
                        }
                    },
                    scrollable: false,
                    sortable: false,
                    selectable: true,
                    pageable: true,
                    columns:
                            [
                                { field: "EmployeeId", title: "EmployeeId", width: "110px" },
                            { field: "Name", title: "Name", width: "110px" },
                            { field: "Gender",title: "Gender", width: "110px" },
                            { field: "City",title: "City", width: "110px" },
                            ]
                }).data("kendoGrid");
            }

        }); // end ready




    </script>
</body>

【讨论】：