Kendo Grid Binding

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2013.1.319/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.web.min.js"></script>
<div id="content">
    <div id="buttons">
        <button id="addRow" data-bind="click: addRow">Add row</button>
        <button id="addRow" data-bind="click: addChild">Add child</button>
        <button id="addRow" data-bind="click: setToFalse">Set to false</button>
        <button id="resetData" data-bind="click: resetData">Reset data</button>
    </div>
    
    <div id="grid" data-bind="source: data"></div>
      
</div>

<script id="detailTemplate" type="text/x-kendo-template">
    <div>
        <div class="detailGrid" data-bind="source: children"></div>
    </div>
</script>

CSS

#buttons {
    margin-bottom: 10px;
}

JavaScript

jQuery(function($) {
   
    var originalData = [
        { Id: 1, Name: "John", Surname: "Doe", selected: true, children: [
            { Id: 2, Name: "1", Surname: "1S", selected: true },
            { Id: 3, Name: "2", Surname: "2S", selected: true }
          ]
        },
        { Id: 4, Name: "Jason", Surname: "Smith", selected: false, children: [
            { Id: 5, Name: "3", Surname: "3S", selected: false },
            { Id: 6, Name: "4", Surname: "4S", selected: false },
            { Id: 7, Name: "5", Surname: "5S", selected: false }
          ]
        }
    ];
    
    var VM = kendo.observable({
        data: originalData,
        
        addRow: function() {
            this.data.push({ Id: 10, Name: "Jack", Surname: "Sparrow", selected: false });
        },
        
        addChild: function() {
            this.data[0].children.push({ Id: 10, Name: "Another", Surname: "Child", selected: true });
        },
        
        setToFalse: function() {
            this.data[0].set('selected', false);
        },
        
        resetData: function() {
            this.set('data', originalData);
        }
    });
    
    var expandedRowIds = [];
    
    function updateModel() {
        var newModel = VM.get('data').toJSON();
        
        $.each(newModel[0].children, function (idx, child) {
            child.selected = !child.selected;
        });
        
        VM.set('data', newModel);
        setBindings();
    }
    
    function setBindings() {
        VM.data.bind("change", function (e) {
            //debugger;
            var item = e.items[0];
            
            updateModel();
            
            alert(item.Id + " " + item.Name + " " + item.Surname + " changed!");
        });
    }
    
    function createGrid (element, options) {
        var defaultOptions = {
            detailTemplate: kendo.template($("#detailTemplate").html()),
            detailInit: detailInit,
            columns: [
                { field: "Id",...