CRUD local database with Kendo

by JayData

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>Tasks and Categories  in a local database</h3>
<p>This example uses a read/write local database to keep track of tasks and categories. </p>
<p>Add a new task and assign a category by pressing "Add new record"</p>
<p><i>for the example on setting non autoincremen IDs  <a href="http://jsfiddle.net/JayData/Fe2J2/"> check this</a></i></p>
<p id="loading" style="display:none">... loading local database with demo data...</p>
<div id="grid"></div>

CSS

body{
    font-family: Segoe UI Light
}

JavaScript

$(function() {
    var Task = $data.define("Task", {
        Todo: String,
        Completed: Boolean,
        CategoryId: Number
    })
    
    var Category = $data.define("Category", {
        CategoryName: String
    });
    
    var TaskDB = $data.EntityContext.extend("TaskDB", {
        Tasks: { type: $data.EntitySet, elementType: Task },
        Categories: { type: $data.EntitySet, elementType: Category }
    });
    
    var database = new TaskDB({ provider: 'local' });

    var categorySource = database.Categories.asKendoDataSource();
    var taskSource = database.Tasks.asKendoDataSource()

    addDemoData(database).then(function() {
        $('#grid').kendoGrid({
            dataSource: taskSource, 
            filterable: true,
            pageable: true,
            editable: 'popup',
            sortable: true,
            columnMenu: true,
            columns: ["Id", "Todo", "Completed", 
                      {
                          field: "CategoryId",
                          title: "Category",
                          template: categoryName,
                          editor: categoryNameEditor,
                          filterable: { ui: categoryFilter }
                      },
                      {
                          command: ["edit", "destroy"]
                      }],
            toolbar: ['create']
        });    
    });
    
    function categoryName(task) {
        return task.CategoryId ? categorySource.get(task.CategoryId).CategoryName : null;
    }
    
    function categoryNameEditor(container, options) {
        options.model.CategoryId = options.model.CategoryId || "";
        categoryDropDown($('<input required data-bind="value: CategoryId"/>').appendTo(container));
    }
    
    function categoryFilter(element) {
        categoryDropDown(element);
    }
    
    function categoryDropDown(element) {
        element.kendoDropDownList({
            dataSource: categorySource,
            dataTextField:...