Kendo UI [DropDownList] - Conflict in multiple elements

Question

I am using Kendo UI DropDownList element with filter search.

If user searches inside dropdown and searched item is not available I am showing + Add link...

This is working as expected only if I have one <select> box

Thanks to @Jonathan, who helped in the above :)

But getting issue if I have more than 1 select box

Online Demo

jQuery

$(document).ready(function() {
  // set up the delay function
  var delay = (function(){
    var timer = 0;
    return function(callback, ms) {
      clearTimeout (timer);
      timer = setTimeout(callback, ms);
    };
  })();

  $(".selectBox").kendoDropDownList({
    filter: "contains"
  });

  // set up the event handler
  $(".k-list-filter input").keyup(function () {

    // wait for Kendo to catch up
    delay(function () {
      // check the number of items in the list and make sure we don't already have an add link
      if ($('.k-list-scroller ul > li').length === 0 && !($(".newItem").length)) {
        $('.k-list-filter .k-i-search').hide();
        $('.k-list-filter').append('<a href="javascript:;" class="newItem">+ Add</a>');
      }

      // check the number of items in the list
      if ($('.k-list-scroller ul > li').length > 0) {
        $('.k-list-filter .k-i-search').show();
        $('.k-list-filter .newItem').remove();
      }

    }, 500); // 500 ms delay before running code
  });    
});

HTML

<div class="row">
  <div class="col-xs-4">
    <div class="field">
      <select class="selectBox">
        <option>-- Select 1 --</option>
        <option>Lorem</option>
        <option>Ipsum</option>
        <option>Dolar</option>
      </select>
    </div>
  </div>
  <div class="col-xs-4">
    <div class="field">
      <select class="selectBox">
        <option>-- Select 2 --</option>
        <option>Lorem</option>
        <option>Ipsum</option>
        <option>Dolar</option>
        <option>Sit amet lieu</option>
      </select>
    </div>
  </div>
  <div class="col-xs-4">
    <div class="field">
      <select class="selectBox">
        <option>-- Select 3 --</option>
        <option>Lorem</option>
        <option>Ipsum</option>
        <option>Dolar</option>
      </select>
    </div>
  </div>
</div>

Answer 1

Its because .k-list-scroller and .k-list-filter are rendered for all 3 dropdownlists, but if you need access those elements only for current dropdownlist, use this keyword inside keyup event:

$(".k-list-filter input").keyup(function () {
    //"this" represents html input element
    var listFilter = $(this).closest('.k-list-filter');
    var listScroller = $(this).closest('.k-list-container').find('.k-list-scroller');
    // wait for Kendo to catch up
    delay(function () {
      // check the number of items in the list and make sure we don't already have an add link
        if (listScroller.find('ul > li').length === 0 && !listFilter.find(".newItem").length) {
            listFilter.find('.k-i-search').hide();
            listFilter.append('<a href="javascript:;" class="newItem">+ Add</a>');
        }
        // check the number of items in the list
        if (listScroller.find('ul > li').length > 0) {
            listFilter.find('.k-i-search').show();
            listFilter.find('.newItem').remove();
       }
    }, 500); // 500 ms delay before running code
}); 

Answer 2

There are a few reasons why what you want to achieve is not happening. Everything is related to how you select items inside the keyup function. I'll do my best to explain why:

1. You are selecting all elements with the k-list-scroller...there are 3 of them. So the result of this expression

   $('.k-list-scroller ul > li').length === 0

will always be false in the given context

2. the same happens here...

   $('.k-list-filter .k-i-search').hide();

when you try to hide the magnifying glass icon

3. Last but no least, when the above-mentioned condition is met you need to delay execution of code block inside because kendo/telerik manipulates the dropdown items and makes them visible, in other words, as soon as you hide the search icon telerik will display it immediately.

Here's a working code snippet...

$(document).ready(function() {
  // set up the delay function
  var delay = (function(){
    var timer = 0;
    return function(callback, ms) {
      clearTimeout (timer);
      timer = setTimeout(callback, ms);
    };
  })();

  $(".selectBox").kendoDropDownList({
    filter: "contains"
  });

  // set up the event handler
  $(".k-list-filter input").keyup(function () {
  
   var self = this;

    // wait for Kendo to catch up
    delay(function () {
      // check the number of items in the list and make sure we don't already have an add link
      
      var itemsFound = $(self).parents('.k-list-container').find(".k-list-scroller ul > li").length;
      
      if (itemsFound === 0 && !($(".newItem").length)) {
      console.log("Adding new");
      setTimeout(function(){
        $(self).parents('.k-list-container').find('.k-list-filter .k-i-search').hide();
        $(self).parents('.k-list-container').find('.k-list-filter').append('<a href="javascript:;" class="newItem">+ Add</a>');
        }, 50);
      }

      // check the number of items in the list
      if ($('.k-list-scroller ul > li').length > 0) {
        $('.k-list-filter .k-i-search').show();
        $('.k-list-filter .newItem').remove();
      }

    }, 500); // 500 ms delay before running code
  });    
});

body{font-family:Verdana;font-size:12px;margin:50px 10px;}
.k-header{border:1px solid #ccc;background:#fff;}
.newItem{position:absolute;top:8px;right:10px;}

<link rel="stylesheet" type="text/css" href="//kendo.cdn.telerik.com/2016.1.112/styles/kendo.material.min.css"/>
<link rel="stylesheet" type="text/css" href="//kendo.cdn.telerik.com/2016.1.112/styles/kendo.common-material.min.css"/>
<link rel="stylesheet" type="text/css" href="//kendo.cdn.telerik.com/2016.1.112/styles/kendo.material.min.css"/>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="//kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script>

<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


<div class="row">
  <div class="col-xs-4">
    <div class="field">
      <select class="selectBox">
        <option>-- Select 1 --</option>
        <option>Lorem</option>
        <option>Ipsum</option>
        <option>Dolar</option>
      </select>
    </div>
  </div>
  <div class="col-xs-4">
    <div class="field">
      <select class="selectBox">
        <option>-- Select 2 --</option>
        <option>Lorem</option>
        <option>Ipsum</option>
        <option>Dolar</option>
        <option>Sit amet lieu</option>
      </select>
    </div>
  </div>
  <div class="col-xs-4">
    <div class="field">
      <select class="selectBox">
        <option>-- Select 3 --</option>
        <option>Lorem</option>
        <option>Ipsum</option>
        <option>Dolar</option>
      </select>
    </div>
  </div>
</div>