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">
<h3>CRUD a local database with Kendo UI Grid</h3>
<p>Add new records and see how required fields are handled</p>
<p><i>for the example on setting non autoincremen IDs  <a href="http://jsfiddle.net/JayData/Fe2J2/"> check this</a>
<div id="grid"></div>

CSS

body{
    font-family: Segoe UI Light
}

JavaScript

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

    $('#grid').kendoGrid({
        dataSource: Task.asKendoDataSource(),
        filterable: true,
        sortable: true,
        pageable: true,
        editable: 'popup',
        toolbar: ['create'],
        columns: Task.getFieldNames().concat([ {command: ['destroy', 'edit']}])
    });
    
   
});