Make Visible Inputs Read-Only
The following example demonstrates how to make a visible input of a Kendo UI ComboBox read-only.
<div id="example" role="application">
<form>
<h4>T-shirt Fabric</h4>
<input id="fabric" placeholder="Select fabric..." />
</form>
<script>
$(document).ready(function() {
// create ComboBox from input HTML element
$("#fabric").kendoComboBox({
dataTextField: "text",
dataValueField: "value",
dataSource: [
{ text: "Cotton", value: "1" },
{ text: "Polyester", value: "2" },
{ text: "Cotton/Polyester", value: "3" },
{ text: "Rib Knit", value: "4" }
],
filter: "contains",
suggest: true,
index: 3
});
var fabric = $("#fabric").data("kendoComboBox");
fabric.input.attr("readonly", true)
.on("keydown", function(e) {
if (e.keyCode === 8) {
e.preventDefault();
}
});
});
</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 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.