Complex CRUD OData 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>Flower shop in a cloud backed OData service</h3>
<p>Database is restored every once in a while. Please don't delete items unless you creted them</p>
<div id="grid"></div>

CSS

body{
    font-family: Segoe UI Light
}

JavaScript

$(function () {
    var svc = "https://open.jaystack.net/b8a380cd-b00b-4ce1-8e58-751e615f8dee/1fd8abd2-d697-41ab-9c25-6eee200636d8/api/flowerdb";
    $data.service(svc, function (dbFactory) {

        var database = dbFactory();
        var categorySource = database.Categories.asKendoDataSource();

        $('#grid').kendoGrid({
            dataSource: database.Flowers.asKendoDataSource({}),
            filterable: true,
            pageable: true,
            editable: 'popup',
            sortable: true,
            columnMenu: true,
            columns: ["Name", "Price",
                        {
                            field: "Category_ID",
                            title: "Category",
                            template: categoryName,
                            editor: categoryNameEditor,
                            filterable: { ui: categoryFilter }
                        },
                      {
                          field: 'ImageUrl', 
                          template: '<img width=120 height=80 src=#:ImageUrl#  />'
                      },
                        {
                            command: ["edit", "destroy"]
                        }],
            toolbar: ['create', 'save']
        });

        function categoryName(flower) {
            return flower.Category_ID ? categorySource.get(flower.Category_ID).CategoryName : null;
        }


        function categoryNameEditor(container, options) {
            options.model.Category_ID = options.model.Category_ID || "";
            categoryDropDown($('<input required data-bind="value: Category_ID"/>').appendTo(container));
        }

        function categoryFilter(element) {
            categoryDropDown(element);
        }

        function categoryDropDown(element) {
            element.kendoDropDownList({
                dataSource: categorySource,
                dataTextField: "CategoryName",
                dataValueField: "id",
                optionLabel: "--Select...