Kendo Sample

by valchev

HTML

<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<div id="BoundItems">
    <div data-template="containertpl" data-bind="source: data.rows"></div>
    Bound Field
    <input type="text" data-bind="value: data.rows[0].value" />
    <div>          
        <textarea id="tx" cols="20" rows ="20"></textarea>
    </div>
</div>

<script id="containertpl" type="text/x-kendo-template">
 Template Field <input type="text" data-bind="value: value" />
</script>

JavaScript

var jData = {
    "data": {
      "rows":[{"num": "0", "value":"20"}],
      "name": "Policy Activity (Advanced)",
      "ID": "3561"
    }
};


viewModel = kendo.observable(jData);

viewModel.bind("change", function (e) { 
    jQuery("#tx").val(jQuery("#tx").val() +"\n"  + e.field + " changed");
});

viewModel.bind("set", function (e) {
    jQuery("#tx").val(jQuery("#tx").val() +"\n"  + e.field + " set");
});

viewModel.data.rows[0].bind("set", function(e) { 
    jQuery("#tx").val(jQuery("#tx").val() +"\n"  + e.field + " set");
});

$(document).ready(function(){       
    kendo.bind($("#BoundItems"), viewModel);
});