title: kendo ui grid programatically hide and show the filterable row
body: <p>I have a kendo grid with filterable = true, mode=row.
  I would like a way to have a button click, fire an event that will toggle hiding and showing the filter row.
  Right now, I have it working by editing the innerHTML, but this is not what I want to do in the end, for several reasons. </p>
  
  <p>1) I need to have a saved version of the filter row values before they are removed.</p>
  
  <p>2) After they are removed and re-added they will not work
  ...
  many other reasons, just bad practice and there has to be a better way.</p>
  
  <p>A button that fires the event: toggleFilterClick:</p>
  
  <pre><code>&lt;script type="text/x-kendo-template" id="gridFilter"&gt;
       &lt;button type="button" class="k-button" id="kendoFilterButton" data-click="toggleFilter"&gt;&lt;span class="k-icon k-i-funnel"&gt;&lt;/span&gt;Filter On/Off&lt;/button&gt;                                                                                                  
  &lt;/script&gt; 
  </code></pre>
  
  <p>The Javascript code:</p>
  
  <pre><code>//Gets the innerHTML values before they are removed
  var filterRowValues = $(".k-filter-row")[0].innerHTML;
  
  //fired when the button is clicked
  var toggleFilterClick = $('#kendoFilterButton').on("click", function () {                                                                               
      if ($(".k-filter-row")[0].innerHTML == '')
      {
        $(".k-filter-row")[0].innerHTML = filterRowValues;
      }
      else
      {
        $(".k-filter-row")[0].innerHTML = '';
      }                                                                                                                               
  });
  </code></pre>
  
  <p>Any thoughts suggestions would be appreciated/</p>