title: How to add confirmation window for jQuery Kendo Ui Grid through update?
body: <p>For Kendo UI, it would give a confirmation window before you delete a record.
  <a href="https://i.stack.imgur.com/r2fti.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/r2fti.png" alt="enter image description here" /></a></p>
  <p>Is there a way to add it to the update button? and the add record?</p>
  <p>Here is an example, it seems hook all the callback already.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;base href="https://demos.telerik.com/kendo-ui/grid/editing-inline"&gt;
      &lt;style&gt;html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }&lt;/style&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.2.617/styles/kendo.default-v2.min.css" /&gt;
  
      &lt;script src="https://kendo.cdn.telerik.com/2020.2.617/js/jquery.min.js"&gt;&lt;/script&gt;
      
      
      &lt;script src="https://kendo.cdn.telerik.com/2020.2.617/js/kendo.all.min.js"&gt;&lt;/script&gt;
      
      
  
  &lt;/head&gt;
  &lt;body&gt;
          &lt;div id="example"&gt;
              &lt;div id="grid"&gt;&lt;/div&gt;
  
              &lt;script&gt;
                  $(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" &amp;&amp; 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: "&amp;nbsp;", width: "250px" }],
                          editable: "inline"
                      });
                  });
  
                  function customBoolEditor(container, options) {
                      $('&lt;input class="k-checkbox" type="checkbox" name="Discontinued" data-type="boolean" data-bind="checked:Discontinued"&gt;').appendTo(container);
                  }
              &lt;/script&gt;
          &lt;/div&gt;
  
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>