Kendo UI

jQuery + Kendo UI + MockJax + Knockout

by Vincent Dagpin

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.blueopal.min.css">
<script src="http://cdn.kendostatic.com/2014.1.318/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.common.min.css">
<div id="grid"></div>
<br />
<button id="btnReadContent">Read</button>
<div id="result"></div>

JavaScript

var categoryDs = new kendo.data.DataSource({
    serverFiltering: true,
    transport: {
        read: function (opt) {
            // put the ajax here..

            var ctgs = [{
                CategoryID: 1,
                CategoryName: "Beverages",
                Description: "Soft drinks, coffees, teas, beers, and ales"
            }, {
                CategoryID: 2,
                CategoryName: "Meal",
                Description: "Combo meal 1"
            }];

            opt.success(ctgs);
        }
    }
});

var productDs = new kendo.data.DataSource({
    data: [{
        ProductID: 1,
        ProductName: "Chai",
        SupplierID: 1,
        CategoryID: 1,
        QuantityPerUnit: "10 boxes x 20 bags",
        UnitPrice: 18.0000,
        UnitsInStock: 39,
        UnitsOnOrder: 0,
        ReorderLevel: 10,
        Discontinued: false,
        Category: {
            CategoryID: 1,
            CategoryName: "Beverages",
            Description: "Soft drinks, coffees, teas, beers, and ales"
        }
    }, {
        ProductID: 2,
        ProductName: "Chang",
        SupplierID: 1,
        CategoryID: 1,
        QuantityPerUnit: "24 - 12 oz bottles",
        UnitPrice: 19.0000,
        UnitsInStock: 17,
        UnitsOnOrder: 40,
        ReorderLevel: 25,
        Discontinued: false,
        Category: {
            CategoryID: 1,
            CategoryName: "Beverages",
            Description: "Soft drinks, coffees, teas, beers, and ales"
        }
    }],
    schema: {
        model: {
            fields: {
                ProductName: {
                    type: "string"
                },
                UnitPrice: {
                    type: "number"
                },
                UnitsInStock: {
                    type: "number"
                },
                Discontinued: {
                    type: "boolean"
                },
                Category: {
                    defaultValue: {
                        CategoryID: 1,
    ...