kendo sample 1

by jwstott

HTML

<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<input data-bind="value: name" />
<input data-bind="value: isDirty" />
<input data-bind="value: isChanged" />
<input data-bind="value: counter" />
<button data-bind="click: submit">Save</button>
<button data-bind="click: changeItem">Change</button>
<div id="grid" style="height: 380px"></div>

JavaScript

asmt = function(obj) {
    this.FirstName = undefined;
    this.LastName = undefined;
    // IF AN OBJECT was passed then initialize properties from that object
    if (obj) {
        this.FirstName = obj.FirstName;
        this.LastName = obj.LastName;
    }
};
var viewModel = kendo.observable({

    name: undefined,
    assmts: [],
    listing: [],

    counter: function() {
        this.listing.bind("change", function(e) {
            console.log(e.action, e.field, e.items[0].get("FirstName"));
            this.parent().set('counter', this.parent().listing.length);
        });
        return 0;
    },
    isDirty: function() {

        this.listing.bind("change", function(e) {

            var par = this.parent();

            switch (e.action) {
            case 'itemchange':
                par.set('isChanged', true);
                break;
            case 'add':
                par.set('isDirty', true);
                break;
            }

            // console.log(e.action, e.field, e.items[0].get("FirstName"));
        });

        return false;
    },
    isChanged: function() {
        return false;
    },
    submit: function() {
/*
        this.listing.push({
            FirstName: 'John',
            LastName: 'Doe',
            dirty:false
        });
        this.listing.push({
            FirstName: "Jane",
            LastName: "Doe",
            dirty:true
        });
        */
        this.listing.push(new asmt({
            FirstName: "Jane",
            LastName: "Doe",
            dirty: true
        }));
        this.listing.push(new asmt({
            FirstName: 'John',
            LastName: 'Doe',
            dirty: false
        }));

        console.dir(viewModel);
    },
    changeItem: function() {
        this.listing[0].set('FirstName', 'Jimbo');
        //this.set('isDirty',false);
    }
});
viewModel.set('name', 'jim');
//viewModel.init({name:'jim'});
kendo.bind(document.body, viewModel);




$("#grid").kendoGrid({
   ...