JSFiddle - React, Tailwind, and code Playground

HTML

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

<script id="popup_editor" type="text/x-kendo-template">
    <div style="padding-bottom: 20px">
         <div class="k-edit-label" style="float:left;">
				<label for="popupDiscount">Discount</label>
        </div>
        <div style="float: right;">
            <input type="text" class="k-input k-textbox" name="popupDiscount" data-bind="value:Discount" />
            <span class="k-invalid-msg" data-for="popupDiscount"></span>    
        </div>
        <div style="clear:both;"></div>
    </div>
     
</script>

JavaScript

function checkDiscount(input) {   
            var c = false;
            if (input.attr("name") == "popupDiscount") {
                if(!isValid) {
                    input.attr("data-discountCheck-msg", "Lower discount");
                    isValid = true;
                    return false;
                }
                return true;
            }        
            return true;
        }

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,
                     validation: {
                                        required: true,
                                        discountCheck: function (input) {
                                            return checkDiscount(input);

                                        }

                                    }
                }
            }

        }
    }

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


var isValid = true;
$(document).ready(function () {
    $('#grid').kendoGrid({
        dataSource: dataSource,
       // edit: function(e) {
       //     $(e.container).find(".k-grid-cancel").bind("mousedown", function(e) {
//       ...