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

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

In this article