New to Kendo UI for jQuery? Download free 30-day trial

Detect Wrapper blur Events in the DropDownList


Product Progress® Kendo UI® DropDownList for jQuery
Operating System Windows 10 64bit
Visual Studio Version Visual Studio 2017
Preferred Language JavaScript


How can I detect the blur event of the Kendo UI DropDownList wrapper?


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 class="box">                
      <h4>Console log</h4>
      <div class="console"></div>
      $(document).ready(function() {
        function onOpen() {
          $(".console").append("<p>event: open</p>");

        function onClose() {
          $(".console").append("<p>event: close</p>");

        function onChange() {
          $(".console").append("<p>event: change</p>");

        function onSelect(e) {
          var dataItem = this.dataItem(e.item.index());
          $(".console").append("<p>event: select (" + dataItem.text + " : " + dataItem.value + ")</p>");

        var data = [
          {text: "Item1", value:"1"},
          {text: "Item2", value:"2"},
          {text: "Item3", value:"3"}

          dataTextField: "text",
          dataValueField: "value",
          dataSource: data,
          select: onSelect,
          change: onChange,
          close: onClose,
          open: onOpen

        var wrapper = $("#dropdownlist").data("kendoDropDownList").wrapper;

        wrapper.blur(function() {
          $(".console").append("<p>event: wrapper blur</p>");
    <style scoped>
      .demo-section {
        width: 400px;

See Also

In this article