Kendo Grid Sample, soft Delete

HTML

<script src="http://cdn.kendostatic.com/2012.2.913/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.913/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.913/styles/kendo.common.min.css">
<div id="loadB" name="reloadData">
    <input type='button' onclick='saveandloadData();' value='Save' />
</div>
<div id="main-content" class="k-content">
    <div class="current-state">
         <h4>Current view model state:</h4>
         <pre>
            {     
             Name: <span data-bind="text: name"></span>,
             Age: <span data-bind="text: age"></span>,
             Rank: <span data-bind="text: rank"></span>,
             Changed Fields: <span data-bind="text: changedfieldlist"></span>
             TimeStamp: <span data-bind="text: TimeStamp"></span>
             Object State: <span data-bind="text: ObjectState"></span>
            Grid Data: <textarea cols="80" rows="10" data-bind="text: griddatatext"></textarea>
            }
        </pre>

    </div>
    <div id="content-sub1">
        <form>
            <ul>
                <li>
                    <label class="k-label" for="name">Name:</label>
                    <input class="k-textbox" id="name" name="datapoint1" data-bind="value: name" />
                </li>
                <li>
                    <label class="k-label" for="age">Age:</label>
                    <input class="k-textbox" id="age" name="age" data-bind="value: age" />
                </li>
                <li>
                    <label class="k-label" for="rank">Rank:</label>
                    <input class="k-textbox" id="rank" name="rank" data-bind="value: rank" />
                </li>
                <li>
                    <div id="grid" name="grid" />
                </li>
            </ul>
        </form>
    </div>
</div>

JavaScript

//Dummy up a fake console if it doesn't exist
if (typeof console === "undefined") {
    console = {
        log: function () { },
        debug: function () { }
    };
}

var viewModel;
var loadViewModel = function (data) {
    viewModel = null;
    viewModel = kendo.observable(data);
    viewModel.changedfieldlist = function() {
        var returnData = this.get("ChangedFields").join(',');
        return returnData;
    };
    viewModel.griddatatext = function() {
        var gridstuff = this.get("gridData")
        return JSON.stringify(gridstuff);
    };
    kendo.bind($("#main-content"), viewModel);
    viewModel.bind("change", function (e) {
         if (console) console.log("Changed:" + e.field);
    });
    bindChangedEvents(viewModel);
    createGrid();
};

var rowDisplay = function(ObjectState) {
    //Might contain a more complex evaluation
        if (ObjectState > 2)
            return 'none';
        else
            return 'inline';
};

var createGrid = function() {
    var columns = [
        { 
            field: 'ColumnA',
            title: 'Column A' 
        },
        { 
            field: 'NumberColumn',
             title: 'Number Column',
            type: "number"
        },
        { 
            field: 'DateColumn',
             title: 'DateColumn'
        },
        { 
            field: 'TimeStamp',
            title: 'TimeStamp'
        },        
        { 
            field: 'ObjectState',
            title: 'ObjectState',
            editable: false
        },        
        { 
            field: 'CurrencyColumn',
            title: 'Currency Column',
            format: "{0:c}"
        },
        { 
            title: ''
        }   
  ];
    
    $('#grid').kendoGrid({
        scrollable: false,
        sortable: true,
        resizeable: true,
        reorderable: false,
        dataSource: viewModel.gridData,
        columns: columns,
        editable: "incell",
        rowTemplate: '<tr data-uid="#= uid #" style="display:#=...