Detect Input change Events in the DropDownList
Environment
Product | Progress® Kendo UI® DropDownList for jQuery |
Operating System | Windows 10 64bit |
Visual Studio Version | Visual Studio 2017 |
Preferred Language | JavaScript |
Description
The change
event of the DropDownList fires when the value of the widget is changed by the user. How can I detect changes in the input of the Kendo UI DropDownList?
Solution
The following example demonstrates how to achieve the desired scenario.
<div id="example">
<div class="demo-section k-header">
<h4 class="title">DropDownList</h4>
<input id="dropdownlist" style="width: 400px;"/>
</div>
<div class="box">
<h4>Console log</h4>
<div class="console"></div>
</div>
<script>
$(document).ready(function() {
function widgetChange(e) {
var value = this.value();
$(".console").append("<p>event: change (widget) -- selected value: " + value + "</p>");
};
function inputChange() {
var val = $("#dropdownlist").val()
$(".console").append("<p>event: change (input)-- selected value: " + val + "</p>");
};
var data = [
{text: "Item1", value:"1"},
{text: "Item2", value:"2"},
{text: "Item3", value:"3"}
];
$("#dropdownlist").kendoDropDownList({
dataTextField: "text",
dataValueField: "value",
dataSource: data,
change: widgetChange
});
$("#dropdownlist").change(inputChange);
});
</script>
<style scoped>
.demo-section {
width: 400px;
}
</style>
</div>
See Also
- JavaScript API Reference of the DropDownList
- Automatically Adjust the Width of a DropDownList
- Create DropDownLists with Long Items
- Detect Wrapper Focus Events
- Move the Group Label on Top of Items
- Prevent Popup Closure on Scroll
- Remove Items
- Set DataSource Dynamically
- Update MVVM Bound Models on Load