title: Toggle floating filter in Ag-Grid?
body: <p>I am trying to have the display of the floating filter be determined by a switch or button click. Seems simple enough. I should just be able to toggle between true and false, supply that value to the floating filter in the grid options, and refresh the header right? Unfortunately, the grid always seems to be one step behind. When I click the first time, nothing happens. When I toggle the switch back to false is when the floating filter comes up. The floating filter will then continue to appear (when the switch is false) and disappear (when the switch is true). To make things even weirder, if I toggle the floating filter switch a few times and then try toggling the rowGroupPanelShow (which I am also trying to have toggleable), it will trigger the floating filter to switch to whatever value it was not previously. But only once.</p>
  
  <p>I have tried a few variations on this. I've tried switches and buttons. I've tried watchers and writing my own functions to toggle true and false. I've tried calling <code>this.gridApi.refreshHeader()</code> within the same function as the toggle and calling it from it's own function. I've tried calling <code>this.columnApi.resetColumnState()</code> (works for resetting grouping). Everything console logs correctly but the grid always seems to be one step behind.</p>
  
  <p>Here's a link to a plunker that I took from ag-grid's website and modified to demonstrate the behavior: <a href="https://plnkr.co/edit/Me51NOVOCbmvFxx95WpP?p=preview" rel="nofollow noreferrer">https://plnkr.co/edit/Me51NOVOCbmvFxx95WpP?p=preview</a></p>
  
  <p>Here is the switch and the grid:</p>
  
  <pre><code>&lt;v-layout row wrap justify-center&gt;
    &lt;v-flex xs6 sm2 md2&gt;
      &lt;v-switch
        class="switch"
        color="blue"
        id="filterSwitch"
        label="Floating Filter"
        v-model="filterSwitch"
      &gt;&lt;/v-switch&gt;
    &lt;/v-flex&gt;
    &lt;v-flex xs6 sm2 md2&gt;
      &lt;v-switch
        class="switch"
        color="blue"
        id="groupSwitch"
        label="Row Grouping Panel"
        v-model="groupSwitch"
      &gt;&lt;/v-switch&gt;
    &lt;/v-flex&gt;
  &lt;/v-layout&gt;
  &lt;div class="buys"&gt;
    &lt;ag-grid-vue
    id="personTableAgGridTest"
    style="width: 100%; height: 65vh;"
    class="ag-theme-balham"
    :columnDefs="columnDefs"
    :rowData="rowData"
    :cacheBlockSize="cacheBlockSize"
    :rowModelType="rowModelType"
    :enableColResize="true"
    :enableFilter="true"
    :enableSorting="true"
    :rowSelection="rowSelection"
    :animateRows="true"
    :floatingFilter="floatingFilter"
    :maxConcurrentDatasourceRequests="maxConcurrentDatasourceRequests"
    :defaultColDef="defaultColDef"
    :columnTypes="columnTypes"
    :sideBar="sideBar"
    :rowGroupPanelShow="rowGroupPanelShow"
    :gridReady="onGridReady"
    &gt;
  
    &lt;/ag-grid-vue&gt;
  </code></pre>
  
  <p>Here is the relevant bound data</p>
  
  <pre><code>export default {
    data() {
      return {
        columnDefs: null,
        rowData: null,
        cacheBlockSize: 250,
        rowSelection: 'multiple',
        maxBlocksInCache: 5,
        gridApi: null,
        columnApi: null,
        rowGroupPanelShow: 'always',
        floatingFilter: false,
        filterSwitch: false,
        groupSwitch: false,
        rowModelType: 'serverSide',
        maxConcurrentDatasourceRequests: 1,
  </code></pre>
  
  <p>Here are the functions/watchers</p>
  
  <pre><code>    resetColumns () {
        this.columnApi.resetColumnState()
      },
      refreshHeader2 () {
        console.log('in refresh header', this.floatingFilter)
        this.gridApi.refreshHeader()
        // this.resetColumns()
      }
   },
    watch: {
      filterSwitch (val) {
        console.log('val', val, this.floatingFilter)
        this.floatingFilter = !this.floatingFilter
        this.refreshHeader2()
      },
  </code></pre>
  
  <p>Expected: Whether or not the floating filter is shown should be toggled by a switch. Passing the value of the switch to the grid and then refreshing the header should accomplish this.</p>
  
  <p>Actual: Grid seems to be one step behind (shows floating filter when switch is false).</p>