Disable Cascading Children ComboBoxes
Environment
| Product | Progress® Kendo UI® ComboBox for jQuery |
| Operating System | Windows 10 64bit |
| Visual Studio Version | Visual Studio 2017 |
| Preferred Language | JavaScript |
Description
How can I disable a cascading child Kendo UI ComboBox?
Solution
The following example demonstrates how to achieve the desired scenario.
<div id="example">
<div class="demo-section k-header">
<h4>View Order Details</h4>
<p>
<label for="categories">Categories:</label><input id="categories" style="width: 270px" value="1"/>
</p>
<p>
<label for="products">Products:</label><input id="products" disabled="disabled" style="width: 270px" />
</p>
</div>
<style scoped>
.demo-section {
width: 400px;
}
.demo-section p {
margin-top: 1em;
}
.demo-section label {
display: inline-block;
width: 100px;
padding-right: 5px;
text-align: right;
}
.demo-section .k-button {
margin: 1em 0 0 105px;
}
.k-readonly
{
color: gray;
}
</style>
<script>
$(document).ready(function() {
var categories = $("#categories").kendoComboBox({
filter: "contains",
placeholder: "Select category...",
dataTextField: "CategoryName",
dataValueField: "CategoryID",
dataSource: {
type: "odata",
serverFiltering: true,
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Categories"
}
}
}).data("kendoComboBox");
var products = $("#products").kendoComboBox({
cascadeFrom: "categories",
filter: "contains",
placeholder: "Type 'cha'...",
dataTextField: "ProductName",
dataValueField: "ProductID",
dataSource: {
type: "odata",
serverFiltering: true,
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
}
},
dataBound: function() {
this.enable(false);
}
}).data("kendoComboBox");
});
</script>
</div>