JSFiddle - React, Tailwind, and code Playground

by valchev

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/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.mobile.all.min.css">
<div id="example">
    <input type="text" class="k-input" data-bind="value: foo.bar" />Change me
    <br /><br />
    <input type="text" class="k-input" data-bind="value: txt" />Change me
</div>

JavaScript

var viewModel = kendo.observable({
    txt: "sample text",
    foo: {
       bar: "bar" 
    }  
})
    
kendo.bind($("#example"), viewModel);

//for literal fields
//bind to change of the viewModel
viewModel.bind("change", function(e) {
    if(e.field === "txt") {
        kendo.ui.progress($("#example"), true);
        setTimeout(function() {
            kendo.ui.progress($("#example"), false);
        }, 1000);            
    }
});

//for viewModel properties (object fields)
//bind to the change of the respective object
viewModel.foo.bind("change", function(e) {
    kendo.ui.progress($("#example"), true);
    setTimeout(function() {
        kendo.ui.progress($("#example"), false);
    }, 1000);
});