Cascading DropDownLists with HTML Table

by marhaba

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2012.3.1114/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>
    <table id="orders"></table>
</p>

CSS

.k-dropdown .k-state-focused{
 border-color: red;
 border-width: 1px;    
}

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 orders = $("#orders");

    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);
        }
    }).data("kendoComboBox");

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

            orders.append("<tr><td>value: " + value + "</td></tr>" +
                          "<tr><td>dataItem: " +...