Cascading DropDownLists with initial value

by Akram kamal

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2012.1.322/js/kendo.all.min.js"></script>
<p>
    <label for="categories">Catergories:</label>
    <input id="categories"/>
</p>
<p>
    <label for="products">Products:</label>
    <input id="products" disabled="disabled" />
</p>
<p>
    <label for="orders">Orders:</label>
    <input id="orders" disabled="disabled" />
</p>

JavaScript

$(document).ready(function() {
    var productsDataSource = new kendo.data.DataSource({
        type: "odata",
        serverFiltering: true,
        transport: {
            read: "http://demos.kendoui.com/service/Northwind.svc/Products"
        }   
    });

    var ordersDataSource = new kendo.data.DataSource({
        type: "odata",
        serverFiltering: true,
        transport: {
            read: "http://demos.kendoui.com/service/Northwind.svc/Order_Details?$expand=Order"
        }
    });

    var categories = $("#categories").kendoDropDownList({
        optionLabel: "Select category...",
        dataTextField: "CategoryName",
        dataValueField: "CategoryID",
        dataSource: {
            type: "odata",
            serverFiltering: true,
            transport: {
                read: "http://demos.kendoui.com/service/Northwind.svc/Categories"
            }
        },
        change: function() {
            var value = this.value();

            if (value) {
                productsDataSource.one("change", function() {
                    products.current(null);
                }).filter({
                    field: "CategoryID",
                    operator: "eq",
                    value: parseInt(value)
                });
                products.enable();
            } else {
                products.enable(false);
            }
            
            products.select(0);
            orders.select(0);
            orders.enable(false);
        }
    }).data("kendoComboBox");

    var products = $("#products").kendoDropDownList({
        autoBind: false,
        optionLabel: "Select product...",
        dataTextField: "ProductName",
        dataValueField: "ProductID",
        dataSource: productsDataSource,
        change: function() {
            var value = this.value();

            if (value) {
                ordersDataSource.one("change", function() {
                    orders.current(null);        
                }).filter({
    ...