Reset cascade

by OnaBai

HTML

<script src="http://cdn.kendostatic.com/2013.1.319/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.default.min.css">
    <div class="demo-section">
        <h2>View Order Details</h2>
        <label for="categories">Categories:</label><input id="categories" style="width: 300px"/>
        <label for="products">Products:</label><input id="products" disabled="disabled" style="width: 300px"/>
        <label for="orders">Orders:</label><input id="orders" disabled="disabled" style="width: 300px"/>
        <button class="k-button" id="button">Reset</button>
    </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;
}

JavaScript

$("#button").on("click", function () {
    categories.text('');
});

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

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

var orders = $("#orders").kendoComboBox({
    autoBind      : false,
    cascadeFrom   : "products",
    placeholder   : "Select order...",
    dataTextField : "Order.ShipCity",
    dataValueField: "OrderID",
    dataSource    : {
        type           : "odata",
        serverFiltering: true,
        transport      : {
            read: "http://demos.kendoui.com/service/Northwind.svc/Order_Details?$expand=Order"
        }
    }
}).data("kendoComboBox");