Detect Wrapper blur 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

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

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 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"}
        ];

        $("#dropdownlist").kendoDropDownList({
          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>");
        });
      });
    </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