Kendo Child Collection update

By default, Kendo does not set the "dirty" property when modifying properties within a child collection.

by Josh Eastburn

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2014.1.318/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.dataviz.default.min.css">
<div id="main">
    <input type="text" data-bind="value: current.name" data-value-update="keyup" />
    <div>Use Custom Change Code: <input type="checkbox" data-bind="checked: useCustomChange"/></div>
    <div>Dirty: <span id="isDirty">false</span></div>
    <div class="children" data-role="listview" data-bind="source: current.children" data-template="item-template"></div>
</div>
<script id="item-template" type="text/x-kendo-template">
    <div><input type="text" data-bind="value: name" data-value-update="keyup"/></div>
</script>

CSS

#main {
    margin: 10px;
    font-family: Arial;
}
.children {
    padding: 10px;
    background: #cecece;
    margin-top: 10px;
}
#isDirty {
    text-transform: uppercase;
    font-weight: bold;
}

JavaScript

(function () {

    var ParentObject = kendo.data.Model.define({
        id: 'id',
        fields: {
            id: {
                type: 'number'
            },
            name: {
                type: 'string'
            },
            children: {
                defaultValue: []
            }
        },
        init: function (data) {
            kendo.data.Model.fn.init.call(this, data);
            // set up a change handler
            this.bind('change', this._onChange);
        },
        _onChange: function (e) {
            // call the base function
            kendo.data.Model.fn._notifyChange.call(this, e);

            // kendo only handles add/remove.  set dirty for child itemchanges
            if (e.action === 'itemchange' && viewModel.get('useCustomChange')) {
                this.dirty = true;
            }

            // only needed for this example to refresh/update UI to show dirty state
            $('#isDirty').text(this.dirty);
        }
    });

    var ChildObject = kendo.data.Model.define({
        id: 'id',
        fields: {
            id: {
                type: 'number'
            },
            name: {
                type: 'string'
            }
        }
    });

    var viewModel = kendo.observable({
        useCustomChange: false,
        current: new ParentObject({
            id: 1,
            name: 'Parent',
            children: [
            new ChildObject({
                id: 100,
                name: 'child 1'
            }),
            new ChildObject({
                id: 200,
                name: 'child 2'
            }),
            new ChildObject({
                id: 300,
                name: 'child 3'
            })]
        })
    });


    kendo.bind('#main', viewModel);

})()