剑道网格 - 用于在编辑中启用行的自定义命令

本文关键字：启用 自定义 命令 编辑 网格 用于 | 更新日期: 2023-09-27 17:56:14

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

此网格还会将新行追加到网格底部。

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

剑道网格 - 用于在编辑中启用行的自定义命令

请遵循此示例：

<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>
相关文章：