JSFiddle - React, Tailwind, and code Playground

HTML

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

<script id="popup_editor" type="text/x-kendo-template">
    <div class="k-edit-label">
				<label for="popupDiscount">Discount</label>
			</div>
            <input type="text" class="k-input k-textbox" name="popupDiscount" data-bind="value:Discount">
</script>

JavaScript

data = [];
counter = data.length;
var dataSource = new kendo.data.DataSource({
    transport: {
        read: function (o) {
            //pass the date
            o.success(data);
        },
        create: function (o) {
            console.log(2);
            var item = o.data;
            //assign a unique ID and return the record
            counter++;
            item.Id = counter;
            o.success(item);
        },
        update: function (o) {
            console.log(1)
            o.success();
        },
        destroy: function (o) {
            o.success();
        }
    },
    schema: {
        model: {
            id: "Id",
            fields: {
                Id: {
                    nullable: false,
                    editable: false
                },

                Discount: {
                    editable: true,
                    nullable: false
                }
            }

        }
    }

});
dataSource.add({
    Discount: 10
});
dataSource.add({
    Discount: 15
});
dataSource.sync();


$(document).ready(function () {
    $('#grid').kendoGrid({
        dataSource: dataSource,
        columns: [{
            field: "Discount",
            title: "Discount",
            width: "100px"
        }, {
            command: ["edit"],
            title: "&nbsp;",
            width: "100px"
        }],
        editable: {
            mode: "popup",
            template: kendo.template($("#popup_editor").html())
        }
    });
});