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">
<ol>
    <li>Add two new records.</li>
    <li>Edit each of those records, making a change and updating them.</li>
    <li>Now click edit, and then cancel the popup editor.</li>
</ol>
There should be no JavaScript errors, and the record should not be removed from the grid.
<hr/>
<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

var data = {
	budgets: [
		{Id: 1, Discount: 10},
		{Id: 2, Discount: 15}
	]
};
var schema = {
	data: "budgets",
	model: {
		id: "Id",
		fields: {
			Id: {
				nullable: false,
				editable: false
			},

			Discount: {
				editable: true,
				nullable: false
			}
		}
	}
};
	
var counter = 0;
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;
			if (!item[schema.model.id] || item[schema.model.id] == 0) {
				//if the record Id 
				//assign a unique ID and return the record
				counter--;
				item[schema.model.id] = counter;
			}
            var newItem = {};
			newItem[schema.data] = item;
            o.success(newItem);
            //o.success(item)
        },
        update: function (o) {
            console.log(1)
            o.success();
        },
        destroy: function (o) {
            o.success();
        }
    },
    schema: schema
});
dataSource.sync();

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