JSFiddle - React, Tailwind, and code Playground

by Lance Finney

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2012.2.913/js/kendo.all.min.js"></script>
<div id="grid"></div>
<br />
<p><b>Log:</b></p>
<div id="log"></div>

JavaScript

var data = [{
  ProductID: 1,
  ProductName: "Product Name 1",
  KeyCode: 40,
  KeyDescription: null
}, {
  ProductID: 2,
  ProductName: "Product Name 2",
  KeyCode: null,
  KeyDescription: null
}, {
  ProductID: 3,
  ProductName: "Product 3",
  KeyCode: 18,
  KeyDescription: null
}];

var descriptions = ["Description 1", "Description 2", "Description 3"];

$("#grid").kendoGrid({
  dataSource: {
    data: data,
    schema: {
      model: {
        id: "ProductID",
        fields: {
          ProductName: {
            type: "string",
            editable: false
          },
          KeyCode: {
            type: "integer",
            editable: true
          },
          KeyDescription: {
            type: "string",
            editable: false
          }
        } // End of fields
      } // End of model
    }
  },
  scrollable: false,
  sortable: true,
  filterable: true,
  navigatable: true,
  editable: true,
  save: save,
  //edit: edit,
  columns: [{
    field: "ProductName",
    width: '150px',
  }, {
    field: "KeyCode",
    width: '40px',
  }, {
    field: "KeyDescription",
    title: "Key Description",
    template: "<div class='KeyDescription'>#= KeyDescription#</div>",
  }]
});

function edit(e) {
  e.model.one("set", function(e) {
    if (!confirm("You entered: " + e.field + " = " + e.value)) {
      e.preventDefault();
    }
  });
}

function save(e) {
  e.preventDefault();
  let value = Number(e.values.KeyCode);
  Promise.resolve(confirm("You entered: " + e.values.KeyCode)).then((confirm) => {
    if (confirm) {
      if (value % 2 === 1) {
        e.model.set('KeyCode', (2 * value).toString());
      } else {
        e.model.set('KeyCode', value.toString());
      }
      alert("Changes are Committed!");
    } else {
      log("<li>After Cancel alert (will be NaN sometimes): " + e.sender.editable);
      alert("Changes are Canceled!");
      e.preventDefault();
    }
  });
}

function log(textToLog) {
  $('#log').append(textToLog + "<br />");
}