Kendo Grid-啟用編輯中的行的自定義命令

Question

我有一個使用內聯編輯的Kendo網格。 我想使用一個kendo自定義命令，而不是使用Kendo Framework中可用的標准Edit（）命令，當單擊該命令時，它將找到當前行並將該行置於編輯模式。

此網格還將新行添加到網格底部。

注意：我正在嘗試模擬客戶端的批處理編輯。

Answer 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>

Kendo Grid-啟用編輯中的行的自定義命令

問題描述

1 個解決方案

解決方案1
1 2014-04-03 05:14:30

Kendo Grid-啟用編輯中的行的自定義命令

問題描述

1 個解決方案

解決方案1 1 2014-04-03 05:14:30

解決方案1
1 2014-04-03 05:14:30