Kendo UI DataSource & Knockout

by Zaheer Ahmed

HTML

<script src="http://cdn.kendostatic.com/2011.3.1407/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1407/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1407/styles/kendo.default.min.css">
<script src="http://github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js"></script>
<div id="grid"></div>

CSS

.k-widget{background-color:#fff}.k-widget,.k-input,.k-textbox,.k-group,.k-content,.k-header,.k-editable-area,.k-separator,.k-colorpicker .k-arrow-down,.k-autocomplete,.k-dropdown-wrap,.k-toolbar,.k-group-footer td,.k-grid-footer,.k-footer-template td,.k-state-default,.k-state-default .k-select,.k-state-disabled,.k-grid-header-wrap,.k-grid-header,.k-grid td,.k-grid-footer-wrap,.k-pager-wrap,.k-grouping-header,.k-grouping-header .k-group-indicator,.k-dropdown-wrap,.k-autocomplete,.k-panelbar>.k-item>.k-link,.k-panel>.k-item>.k-link,.k-panelbar .k-panel,.k-panelbar .k-content,.k-calendar th,.k-slider-track,.k-splitbar,.k-dropzone-active,.k-upload-files,.k-tiles,.k-toolbar,.k-dropdown-wrap,.k-tooltip,.k-progress{border-color:#94c0d2}.k-group,.k-toolbar,.k-grouping-header,.k-pager-wrap,.k-group-footer td,.k-grid-footer,.k-footer-template td,.k-widget .k-status,.k-grouping-row td,td.k-group-cell,.k-calendar th,.k-dropzone-hovered,.k-upload-files{background-color:#daecf4}.k-list-container{border-color:#94c0d2;background-color:#daecf4}.k-content,.k-editable-area,.k-panelbar>li.k-item,.k-panel>li.k-item,.k-tiles{background-color:#fff}.k-alt,.k-separator{background-color:#eaf4f9}.k-widget .k-dropdown-wrap,.k-widget .k-picker-wrap,.k-widget .k-numeric-wrap,.k-autocomplete.k-header,.k-autocomplete.k-state-focused,div.k-dropdown-wrap.k-state-active,.k-dropdown-wrap.k-state-focused,.k-dropdown-wrap.k-state-focused:hover,div.k-picker-wrap.k-state-active,.k-picker-wrap.k-state-focused,.k-picker-wrap.k-state-focused:hover,span.k-numeric-wrap.k-state-active,.k-numeric-wrap.k-state-focused,.k-numeric-wrap.k-state-focused:hover{border-color:#94c0d2;background-color:#daecf4}.k-autocomplete .k-input,.k-dropdown-wrap .k-input,.k-autocomplete.k-state-focused .k-input,.k-dropdown-wrap.k-state-focused .k-input,.k-picker-wrap.k-state-focused .k-input,.k-numeric-wrap.k-state-focused...

JavaScript

// this should be updated when new entries are added, updated or deleted

var data = 
    [{
        "ID": 3,
        "TopMenuId": 2,
        "Title": "Cashier",
        "Link": "www.fake123.com"},
    {
        "ID": 4,
        "TopMenuId": 2,
        "Title": "Deposit",
        "Link": "www.fake123.com"}
   ];


$("#grid").kendoGrid({
    dataSource: {
        transport: {
            read: function(options) {
                options.success(data);
            },
            create: function(options) {
                alert(data.length);
            },
            update: function(options) {
               alert("Update");
            },
            destroy: function(options) {
                alert("Destroy");
                alert(data.length);
            }
        },
        batch: true,
        pageSize: 4,
        schema: {
            model: {
                id: "ID",
                fields: {
                    ID: {
                        editable: false,
                        nullable: true
                    },
                    TopMenuId: {
                        editable: false,
                        nullable: true
                    },
                    Title: {
                        editable: true,
                        validation: {
                            required: true
                        }
                    },
                    Link: {
                        editable: true
                    }
                }
            },
            data: "",
            total: function(result) {
                result = result.data || result;
                return result.length || 0;
            }
        }
    },
    editable: true,
    toolbar: ["create", "save", "cancel"],
    height: 250,
    scrollable: true,
    sortable: true,
    filterable: false,
    pageable: true,
    columns: [
        {
        field: "TopMenuId",
        title: "Menu Id"},
    {
        field: "Title",
        title: "Title"},
        {
  ...