Detect When All Widgets Are Bound
The following example demonstrates how to use promises to detect when all widgets in a Kendo UI ComboBox are bound.
<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" 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 promises = [];
var change = function() {
this.deferred.resolve();
}
var categories = $("#categories").kendoDropDownList({
dataTextField: "CategoryName",
dataValueField: "CategoryID",
dataSource: {
type: "odata",
serverFiltering: true,
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Categories"
},
requestStart: function() {
this.deferred = $.Deferred();
promises.push(this.deferred.promise());
}
}
}).data("kendoDropDownList");
var products = $("#products").kendoDropDownList({
dataTextField: "ProductName",
dataValueField: "ProductID",
dataSource: {
type: "odata",
serverFiltering: true,
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
},
requestStart: function() {
this.deferred = $.Deferred();
promises.push(this.deferred.promise());
}
}
}).data("kendoDropDownList");
categories.dataSource.bind("change", change);
products.dataSource.bind("change", change);
$.when.apply(null, promises)
.done(function() {
console.log("done");
console.log(categories.value());
console.log(products.value());
});
});
</script>
</div>
See Also
- ComboBox JavaScript API Reference
- How to Bypass Boundary Detection
- How to Configure Deferred Value Binding
- How to Expand ComboBox Located in Bootstrap Layout
- How to Implement Cascading with Local Data
- How to Make Visible Input Readonly
- How to Open ComboBox When onFocus is Triggered
- How to Prevent Adding Custom Values
- How to Select Items on Tab
- How to Underline Matched Search
For more runnable examples on the Kendo UI ComboBox, check its how-to articles.