具有整个网格编辑模式的剑道批量编辑答案

【问题标题】：Kendo batch editing with entire grid edit mode具有整个网格编辑模式的剑道批量编辑
【发布时间】：2018-06-23 19:32:15
【问题描述】：

我已经在我的应用程序中实现了剑道网格批量编辑功能。我可以通过 kendo 提供的默认功能保存更改。这是我在项目中实现的相同代码：

<!DOCTYPE html>
<html>
<head>
    <base href="https://demos.telerik.com/kendo-ui/grid/editing">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.flat.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.flat.mobile.min.css" />

    <script src="https://kendo.cdn.telerik.com/2017.3.1026/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.all.min.js"></script>


</head>
<body>
        <div id="example">
            <div id="grid"></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)};
                                    }
                                }
                            },
                            batch: true,
                            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,
                        navigatable: true,
                        pageable: true,
                        height: 550,
                        toolbar: ["create", "save", "cancel"],
                        columns: [
                            "ProductName",
                            { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: 120 },
                            { field: "UnitsInStock", title: "Units In Stock", width: 120 },
                            { field: "Discontinued", width: 120, editor: customBoolEditor },
                            { command: "destroy", title: "&nbsp;", width: 150 }],
                        editable: true
                    });
                });

                function customBoolEditor(container, options) {
                    var guid = kendo.guid();
                    $('<input class="k-checkbox" id="' + guid + '" type="checkbox" name="Discontinued" data-type="boolean" data-bind="checked:Discontinued">').appendTo(container);
                    $('<label class="k-checkbox-label" for="' + guid + '"></label>').appendTo(container);
                }
            </script>
        </div>


</body>
</html>

我需要一个功能来在编辑模式下显示整个网格，其中包含所有带有编辑模板的可编辑列。我尝试添加与编辑器模板相同的客户端模板，但行为与预期不符。有什么办法可以用一个通用模板同时显示客户端模板和编辑器模板？

例如在上面的示例中，我需要在所有行上都显示带有数字文本框的单价。不仅当我点击它时。

【问题讨论】：

Grid 组件不支持“所有行编辑”模式 -- telerik.com/forums/put-all-rows-into-edit-mode。有一些黑客可能会奏效，例如stackoverflow.com/questions/18304946/…。您可能希望在鼠标输入事件而不是单击时让网格行进入编辑模式

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

【解决方案1】：

这里有一个例子；

$("#grid").kendoGrid({
  dataSource: {
    schema: {
      model: {
        id: "id",
        fields: {
          id: { editable: false }
        }
      }
    },
    change: function() {
      $("textarea").val(
        kendo.stringify(this.view())
      );
    },
    data: [
      { id:1, age: 30, name: "John Doe" }
    ]
  },
  columns: [
    { field: "id", width: 50 },
    { field: "age", template: "<input data-bind='value: age' data-role='numerictextbox'>" },
    { field: "name", template:"<input data-bind='value: name' >" }
  ],
  dataBound: function() {
    var rows = this.tbody.children();
    var dataItems = this.dataSource.view();
    for (var i = 0; i < dataItems.length; i++)  {
      kendo.bind(rows[i], dataItems[i]);
    }
  }
});

http://jsbin.com/ApoFobA/2/edit?html,js,output

【讨论】：