title: Kendo UI multi select drop down with filter and select all options
body: <p>I need a kendo ui dropdown list with the following features.</p>
  
  <blockquote>
    <ol>
    <li>Multi select dropdown with a select check box to check multiple options at at time.</li>
    <li>Select all checkbox as a header template, on which when I click on it, all the <strong>filtered</strong> search results of the option is selected.</li>
    </ol>
  </blockquote>
  
  <p><a href="https://i.stack.imgur.com/3La5N.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3La5N.png" alt="Required Solution"></a></p>
  
  <p>I have gone through many references and find a close solution from telrik. In which my first requirement is satisfied. I have attached the code snippet here with.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;title&gt;Kendo UI Snippet&lt;/title&gt;
  
      &lt;link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.common.min.css" /&gt;
      &lt;link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.rtl.min.css" /&gt;
      &lt;link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.silver.min.css" /&gt;
      &lt;link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.mobile.all.min.css" /&gt;
  
      &lt;script src="http://code.jquery.com/jquery-1.12.4.min.js"&gt;&lt;/script&gt;
      &lt;script src="http://kendo.cdn.telerik.com/2016.3.1028/js/kendo.all.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
      &lt;div id="example" role="application"&gt;
          &lt;div class="demo-section k-header"&gt;
              &lt;h2&gt;Invite Attendees&lt;/h2&gt;
              &lt;label for="required"&gt;Required&lt;/label&gt;
              &lt;select id="required" multiple="multiple" data-placeholder="Select attendees..."&gt;
                  &lt;option selected&gt;Steven White&lt;/option&gt;
                  &lt;option&gt;Nancy King&lt;/option&gt;
                  &lt;option&gt;Nancy Davolio&lt;/option&gt;
                  &lt;option&gt;Robert Davolio&lt;/option&gt;
                  &lt;option&gt;Michael Leverling&lt;/option&gt;
                  &lt;option&gt;Andrew Callahan&lt;/option&gt;
                  &lt;option&gt;Michael Suyama&lt;/option&gt;
                  &lt;option selected&gt;Anne King&lt;/option&gt;
                  &lt;option&gt;Laura Peacock&lt;/option&gt;
                  &lt;option&gt;Robert Fuller&lt;/option&gt;
                  &lt;option&gt;Janet White&lt;/option&gt;
                  &lt;option&gt;Nancy Leverling&lt;/option&gt;
                  &lt;option&gt;Robert Buchanan&lt;/option&gt;
                  &lt;option&gt;Margaret Buchanan&lt;/option&gt;
                  &lt;option selected&gt;Andrew Fuller&lt;/option&gt;
                  &lt;option&gt;Anne Davolio&lt;/option&gt;
                  &lt;option&gt;Andrew Suyama&lt;/option&gt;
                  &lt;option&gt;Nige Buchanan&lt;/option&gt;
                  &lt;option&gt;Laura Fuller&lt;/option&gt;
              &lt;/select&gt;
          &lt;/div&gt;
          &lt;style&gt;
              .k-list .k-item {}
  
              .k-item input {}
          &lt;/style&gt;
          &lt;script&gt;
              $(document).ready(function () {
                  var checkInputs = function (elements) {
                      elements.each(function () {
                          var element = $(this);
                          var input = element.children("input");
  
                          input.prop("checked", element.hasClass("k-state-selected"));
                      });
                  };
                  // create MultiSelect from select HTML element
                  var required = $("#required").kendoMultiSelect({
                      itemTemplate: "&lt;input type='checkbox'/&gt; #:data.text#",
                      autoClose: false,
                      dataBound: function () {
                          var items = this.ul.find("li");
                          setTimeout(function () {
                              checkInputs(items);
                          });
                      },
                      change: function () {
                          var items = this.ul.find("li");
                          checkInputs(items);
                      }
                  }).data("kendoMultiSelect");
              });
          &lt;/script&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>How can I achieve my second requirement, select all option that selects my filtered search result. I'm looking foe the kend ui Multi Select option itself. I'm not interested in jQuery multi select drop downs. Looking forward for help. Thanks in advance.</p>