Kendo Cascading DropDowns

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.default.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="example" class="k-content">
    <div class="demo-section">
         <h2>View Order Details</h2>

        <p>
            <label for="categories">Categories:</label>
            <input id="categories" style="width: 300px" />
        </p>
        <p>
            <label for="products">Products:</label>
            <input id="products" disabled="disabled" style="width: 300px" />
        </p>
        <p>
            <label for="orders">Orders:</label>
            <input id="orders" disabled="disabled" style="width: 300px" />
        </p>
        <button class="k-button" id="get">View Order</button>
    </div>
</div>

CSS

.demo-section {
                    width: 460px;
                    padding: 30px;
                }
                .demo-section h2 {
                    text-transform: uppercase;
                    font-size: 1.2em;
                    margin-bottom: 30px;
                }
                .demo-section label {
                    display: inline-block;
                    width: 120px;
                    padding-right: 5px;
                    text-align: right;
                }
                .demo-section .k-button {
                    margin: 20px 0 0 125px;
                }
                .k-readonly {
                    color: gray;
                }

JavaScript

$(document).ready(function () {
    var categories = $("#categories").kendoComboBox({
        filter: "contains",
        placeholder: "Select category...",
        dataTextField: "CategoryName",
        dataValueField: "CategoryID",
        dataSource: {
            type: "odata",
            serverFiltering: true,
            transport: {
                read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Categories"
            }
        }
    }).data("kendoComboBox");

    var products = $("#products").kendoComboBox({
        autoBind: false,
        cascadeFrom: "categories",
        filter: "contains",
        placeholder: "Select product...",
        dataTextField: "ProductName",
        dataValueField: "ProductID",
        dataSource: {
            type: "odata",
            serverFiltering: false,
            transport: {
                read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
            }
        }
    }).data("kendoComboBox");

    var orders = $("#orders").kendoComboBox({
        autoBind: false,
        cascadeFrom: "products",
        filter: "contains",
        placeholder: "Select order...",
        dataTextField: "Order.ShipCity",
        dataValueField: "OrderID",
        dataSource: productsData        
    }).data("kendoComboBox");

    $("#get").click(function () {
        var categoryInfo = "\nCategory: { id: " + categories.value() + ", name: " + categories.text() + " }",
            productInfo = "\nProduct: { id: " + products.value() + ", name: " + products.text() + " }",
            orderInfo = "\nOrder: { id: " + orders.value() + ", name: " + orders.text() + " }";

        alert("Order details:\n" + categoryInfo + productInfo + orderInfo);
    });
});