Search for Items by Dragging to Input
The following example demonstrates how to make a read-only text visible in the input field of a Kendo UI ComboBox widget.
To see how the example works:
- Select
Chai
from theDrag: Chai
field. - Drag it to the input field of the ComboBox.
- Release the mouse.
<div id="example">
<div class="demo-section k-header">
<h4>Products</h4>
<div> Drag: Chai </div>
<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",
}
}
}
});
//Wire the drop event
var combobox = $("#products").data("kendoComboBox");
combobox.input.on("drop", function(e) {
var input = e.currentTarget;
var droppedText = e.originalEvent.dataTransfer.getData("text");
setTimeout(function() {
input.value = droppedText;
combobox.search(droppedText);
});
});
});
</script>
<style scoped>
.demo-section {
width: 400px;
}
</style>
</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.