如何通过更新为jQuery Kendo Ui 网格添加确认window？

Question

对于Kendo UI，它会在您删除记录之前给出确认window。

有没有办法将其添加到更新按钮？和添加记录？

这是一个例子，似乎已经挂钩了所有的回调。

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

    <script src="https://kendo.cdn.telerik.com/2020.2.617/js/jquery.min.js"></script>
    
    
    <script src="https://kendo.cdn.telerik.com/2020.2.617/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,
                        pageable: true,
                        height: 550,
                        toolbar: ["create"],
                        columns: [
                            "ProductName",
                            { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "120px" },
                            { field: "UnitsInStock", title:"Units In Stock", width: "120px" },
                            { field: "Discontinued", width: "120px", editor: customBoolEditor },
                            { command: ["edit", "destroy"], title: "&nbsp;", width: "250px" }],
                        editable: "inline"
                    });
                });

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


</body>
</html>

Answer 1

您可以使用 jquery 的 click 事件来做到这一点。因此，每当 edit 按钮或 create new 按钮被点击然后点击处理程序将被调用，然后你可以使用 confirm(..) 框来获得用户的响应。如果用户 select cancel 那么我们可以使用 cancelChanges() 来避免任何更改，否则执行所需的操作。

演示代码 :

$(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,
    pageable: true,
    height: 550,
    toolbar: ["create"],
    columns: [
      "ProductName",
      {
        field: "UnitPrice",
        title: "Unit Price",
        format: "{0:c}",
        width: "120px"
      },
      {
        field: "UnitsInStock",
        title: "Units In Stock",
        width: "120px"
      },
      {
        field: "Discontinued",
        width: "120px",
        editor: customBoolEditor
      },
      {
        command: ["edit", "destroy"],
        title: "&nbsp;",
        width: "250px"
      }
    ],
    editable: "inline"
  });
});

function customBoolEditor(container, options) {
  $('<input class="k-checkbox" type="checkbox" name="Discontinued" data-type="boolean" data-bind="checked:Discontinued">').appendTo(container);
}

//onclick of edit and new recors
$(document).on('click', '.k-grid-edit,.k-grid-add', function() {

  var r = confirm("Are you sure  ?"); //show alert
  //if  user select cancel
  if (r == false) {
    //cancel changes
    $('#grid').data('kendoGrid').dataSource.cancelChanges();
    console.log("Cancel!");
  }
})

html {
  font-size: 14px;
  font-family: Arial, Helvetica, sans-serif;
}

<base href="https://demos.telerik.com/kendo-ui/grid/editing-inline">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.2.617/styles/kendo.default-v2.min.css" />
<script src="https://kendo.cdn.telerik.com/2020.2.617/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.2.617/js/kendo.all.min.js"></script>
<div id="example">
  <div id="grid"></div>
</div>

如何通过更新为jQuery Kendo Ui 网格添加确认window？

How to add confirmation window for jQuery Kendo Ui Grid through update?

html

jquery

kendo-ui

kendo-grid