JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.626/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.626/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.626/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.626/styles/kendo.dataviz.default.min.css">
<script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script>
<div id="grid"></div>
JavaScript
var data = new kendo.data.DataSource({
data: [{
high: 20,
low: 10
}, {
high: 30,
low: 10
}, {
high: 50,
low: 10
}, {
high: 100,
low: 10
}, {
high: 70,
low: 10
}],
schema: {
model: {
fields: {
low: {
type: "number",
validation: {
lower: function(input){
if(input.filter("[name=low]").length){
input.attr("data-lower-msg", "low should be high than high");
var high = $("[name=high]").val();
var isValid = input.val() < high;
if(!isValid) {
validationFlag = true;
}
if (isValid && validationFlag) {
validationFlag = false;
console.log("mhm");
validateForm(input);
}
return isValid
}
return true;
}
}
},
high: {
type: "number",
validation: {
higher: function(input){
if(input.filter("[name=high]").length){
input.attr("data-higher-msg", "low should be lower than high");
var low = $("[name=low]").val();
var isValid = low < input.val();
...