CRUD local database with Kendo

HTML

<script src="http://cdn.kendostatic.com/2012.3.1315/js/kendo.all.min.js"></script>
<script src="http://include.jaydata.org/datajs-1.0.3.js"></script>
<script src="http://include.jaydata.org/jaydata.js"></script>
<script src="http://include.jaydata.org/jaydatamodules/kendo.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.default.min.css">

<div id="grid"></div>

CSS

body{
    font-family: Segoe UI Light
}

pre {
    display:inline
}

JavaScript

$(function () {
    var Task = $data.define("Task", {
        Id: { key: true, type: String, computed: true },
        Todo: String,
        Completed: Boolean
    });

    //this is cloud hosted OData endpoint service generated with a graphical user interface.
    //create your OData service for free at http://jaystack.com
    var odataUrl = "http://open.jaystack.net/b8a380cd-b00b-4ce1-8e58-751e615f8dee/1fd8abd2-d697-41ab-9c25-6eee200636d8/api/flowerdb";
    
    $('#grid').kendoGrid({
        dataSource: Task.asKendoDataSource({
            provider: 'oData',
            url: odataUrl + '/Tasks',
            sort:{ field:"Id",dir:"desc"},
            //add some demo data so that the grid is never empty
            change: function(e) {
                if (!e.action && !e.items.length) { //if (firstFetch && dbIsEmpty)
                    this.add({Todo:'Include script resources', Completed: true});
                    this.add({Todo:'Define data model', Completed: true});
                    this.add({Todo:'Connect grid to data'});
                    this.sync();
                }
            }
        }),
        filterable: true,
        sortable: true,
        pageable: true,
        editable: 'popup',
        toolbar: ['create'],
        columns: Task.getFieldNames().concat([{ command: ['destroy', 'edit']}])
    });
});