title: Kendo UI - custom grid filter: checkbox doesn't work on each click
body: <p>[UPDATE]</p>
  
  <p>After I did as in:
  <a href="http://dojo.telerik.com/aqIXa" rel="nofollow noreferrer">http://dojo.telerik.com/aqIXa</a>
   when I click for example ProductName filter, and then select and deselect all items, go to other fields example Unit Price,click select and deselect all I turnback to Product Name field, and in filter is now:</p>
  
  <p><a href="https://i.stack.imgur.com/fAwcH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fAwcH.png" alt="enter image description here"></a></p>
  
  <p>You can see that Select All combobox is created once more and it will continue to create after I repeat the steps. Does anyone has the Idea why is it happend?</p>
  
  <p>I'm currently working in Kendo and try to make custom grid filter for each column.
  I used this example:</p>
  
  <p><a href="http://dojo.telerik.com/iwAWU" rel="nofollow noreferrer">http://dojo.telerik.com/iwAWU</a></p>
  
  <p>inside initCheckboxFilter function I added, which created checkbox for select all.</p>
  
  <pre><code>var selectAllCheckbox= $("&lt;div&gt;&lt;input type='checkbox' id='checkAll' checked/&gt; Select All&lt;/div&gt;").insertBefore(".k-filter-help-text");
  </code></pre>
  
  <p>and outside that function I implemeted:</p>
  
  <pre><code>function clickMe(){
     $("#checkAll").click(function () {
      if ($("#checkAll").is(':checked')) {
          $(".book").prop("checked", true);
      } else {
          $(".book").prop("checked", false);
      }
  });
  } 
  </code></pre>
  
  <p>(.book is class for template inside:</p>
  
  <pre><code> var element = $("&lt;div class='checkbox-container'&gt;&lt;/div&gt;").insertAfter(helpTextElement).kendoListView({
            dataSource: checkboxesDataSource,
            template: "&lt;div&gt;&lt;input type='checkbox' class='colDefFilter'  value='#:" + field + "#' checked /&gt;#:" + field + "#&lt;/div&gt;",
          });
  </code></pre>
  
  <p>)</p>
  
  <p>I also added UnitPrice and UnitInStock fields:</p>
  
  <pre><code>function onFilterMenuInit(e) {
          debugger;
          if (e.field == "ProductName" || "UnitPrice" || "UnitInStock") {
            initCheckboxFilter.call(this, e);
  
          }
        } 
  </code></pre>
  
  <p>This looks like:</p>
  
  <p><a href="https://i.stack.imgur.com/4chJz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4chJz.png" alt="enter image description here"></a></p>
  
  <p>The first time I click Select All  checkbox on some column filter, it check and uncheck all items and it works fine. When I try to do it on other column, the event is not trigger. Does anyone has idea what is wrong?
  Thanks! </p>