JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/css/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/css/kendo.default.min.css">

<script type="text/x-kendo-tmpl" id="siteEditTemplate">
<div class="product">
<input type="text" data-bind="value:Name" name="Name" required="required" validationMessage="required" />
<span data-for="Name" class="k-invalid-msg"></span>
<input type="text" data-bind="value:Id" name="Id" required="required" validationMessage="required" />
<span data-for="Id" class="k-invalid-msg"></span>

</div>
</script>
<div id="site"></div> 
<button id="btnCancel">Cancel</button>

JavaScript

$(document).ready(function() {
    var schema = kendo.data.Model.define(JSON.parse('{"id":"Id","fields":{"Id":{"type":"number","defaultValue":"0","editable":true,"validation":{"required":true}},"Name":{"type":"string","defaultValue":"New Site","editable":true,"validation":{"required":true}},"Description":{"type":"string","defaultValue":null,"editable":false,"validation":{"required":true}}}}'));
    var model = {
        "Id": 1,
        "Name": "Site1",
        "Description": "Site1"
    };
    var template = kendo.template($("#siteEditTemplate").html());


    var dataSource = new kendo.data.DataSource({
        schema: {
            model: schema
        },
        change: function() { // subscribe to the CHANGE event of the data source
        }
    });
    dataSource.add(model);
    var viewModel = dataSource.view()[0];
    dataSource.sync();
    viewModel.bind('change', function(e) {
        var m = dataSource.view()[0];
        alert('vm change');
    });
    $('#site').html(template(viewModel));
    kendo.bind($("#site"), viewModel);
    $('#btnCancel').click(function(e) {
        dataSource.cancelChanges(viewModel);
        var m = viewModel;
    });
});