Prevent Adding Custom ComboBox Values
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 prevent adding custom values to a Kendo UI ComboBox?
Solution
The following example demonstrates how to achieve the desired scenario.
<div id="example">
<div class="demo-section k-header">
<h4>Products</h4>
<input id="products" style="width: 400px" />
</div>
<script>
$(document).ready(function() {
$("#products").kendoComboBox({
placeholder: "Select product",
dataTextField: "ProductName",
dataValueField: "ProductID",
filter: "contains",
autoBind: false,
minLength: 3,
dataSource: {
type: "odata",
serverFiltering: true,
transport: {
read: {
url: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products",
}
}
},
change: function(e) {
var widget = e.sender;
if (widget.value() && widget.select() === -1) {
//custom has been selected
widget.value(""); //reset widget
}
}
});
});
</script>
<style scoped>
.demo-section {
width: 400px;
}
</style>
</div>