Save In Grid

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.metro.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.all.min.js"></script>
<div id='container'>
    <input type="text" name="username" placeholder="username" data-bind='text:FooBar' />
    <button data-bind='click:clickAdd'>Add</button>
    <button data-bind='click:clickReset'>reset</button>
    <div data-role='grid' data-bind='source:dsItems,events:{save:saveGridItem}' data-editable='incell' data-auto-bind='false' data-scrollable='true' data-sortable='true' data-pageable='false' data-columns='[{field:"Name",title:"Name",sortable:false}, {template:"<button data-bind=\"click:clickDelete\">Delete</button>"}]'></div>
</div>

JavaScript

var data = [{
    id: 1,
    Name: 'first'
}, {
    id: 2,
    Name: 'second'
}, {
    id: 3,
    Name: 'third'
}];

var vm = new kendo.observable({
    dsItems: new kendo.data.DataSource({
        transport: {
            read: function (options) {
                console.warn('read');
                options.success(data);
            },
            create: function (options) {
                console.warn('create');
                console.warn(options.data.Name);
                options.success(options.data);
            },
            update: function (options) {
                console.warn('update');
                console.warn(options.data.Name);
                options.success(options.data);
            },
            destroy: function (options) {
                console.warn('destroy');
                options.success(options.data);
            }
        },
        schema: {
            model: {
                id: 'id'
            }
        }
    }),
    clickAdd: function (e) {
        e.preventDefault();
        console.warn('add');
        var item = {
            id: new Date().getTime(),
            Name: new Date().getTime()
        };
        console.warn(item);
        vm.dsItems.add(item);
        vm.dsItems.sync();
    },
    clickReset: function (e) {
        e.preventDefault();
        vm.dsItems.cancelChanges();
    },
    saveGridItem: function (e) {
        console.warn('save');
        vm.dsItems.sync();
    },
    clickDelete: function (e) {
        e.preventDefault();
        var item = e.data;
        vm.dsItems.remove(item);
        vm.dsItems.sync();
    }
});

kendo.bind($('#container'), vm);

vm.dsItems.read();