JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.kendostatic.com/2012.3.1315/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.default.min.css">
<div id="grid"></div>
<a id="cancel" class="k-button">Cancel</a>
<table id="view" style="width: 300px">
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input data-bind="value: Name" /></td>
      <td><input data-bind="value: Email" /></td>
    </tr>
  </tbody>
</table>

JavaScript

var local = [{ Id: 1, Name: 'Brett', Email: '[email protected]' }];

var model = function () {
  this.Id = 0;
  this.Name = '...';
  this.Email = '...';
};

var ds = new kendo.data.DataSource({
  pageSize: 10,
  schema: {
    model: {
      id: 'Id',
      fields: {
        Id: { type: 'number', editable: false, defaultValue: 0 },
        Name: {},
        Email: {}
      }
    }
  },
  transport: {
    read: function (options) {
      options.success(local);
    },
    create: function (options) {
      options.data.Id = ds.data().length;
      options.success(options.data);
    }
  }
});

var grid = $('#grid').kendoGrid({
  columns: [
    { field: 'Name' },
    { field: 'Email' }
  ],
  dataSource: ds,
  pageable: {
    refresh: true
  },
  selectable: 'row',
  toolbar: kendo.template('<a id="add" class="k-button">Add new record</a><a id="save" class="k-button">Save</a>'),
  change: function (e) {
    kendo.bind($('#view'), this.dataItem(this.select()[0]));
  },
  dataBinding: function (e) {
    if (e.action === 'itemchange') {
      e.preventDefault();
    }
  }
}).data('kendoGrid');

$('#add').on('click', function () {
  ds.add(new model());
});
$('#save').on('click', function () {
  grid.saveChanges();
});
$('#cancel').on('click', function () {
  grid.cancelChanges();
});