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:currentitem.Name" name="Name" required="required" validationMessage="required" />
<span data-for="Name" class="k-invalid-msg"></span>
<input type="text" data-bind="value:currentitem.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());


    dataSource = new kendo.data.DataSource({
        schema: {
            model: schema
        },
        transport:{
            read:function(e){
                e.success(e.data.arr);
            },
            update:function(e){
               debugger;
            }
        }
    });
    dataSource.read({arr:[model]});
    viewModel = kendo.observable({
        currentitem: dataSource.view()[0]
    });

    $('#site').html(template(viewModel));
    kendo.bind($("#site"), viewModel);
    $('#btnCancel').click(function(e) {
        dataSource.cancelChanges();
        viewModel.set("currentitem",dataSource.view()[0]);
    });
});