Toggle floating filter in Ag-Grid?

问题

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.

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 this.gridApi.refreshHeader() within the same function as the toggle and calling it from it's own function. I've tried calling this.columnApi.resetColumnState() (works for resetting grouping). Everything console logs correctly but the grid always seems to be one step behind.

Here's a link to a plunker that I took from ag-grid's website and modified to demonstrate the behavior: https://plnkr.co/edit/Me51NOVOCbmvFxx95WpP?p=preview

Here is the switch and the grid:

<v-layout row wrap justify-center>
  <v-flex xs6 sm2 md2>
    <v-switch
      class="switch"
      color="blue"
      id="filterSwitch"
      label="Floating Filter"
      v-model="filterSwitch"
    ></v-switch>
  </v-flex>
  <v-flex xs6 sm2 md2>
    <v-switch
      class="switch"
      color="blue"
      id="groupSwitch"
      label="Row Grouping Panel"
      v-model="groupSwitch"
    ></v-switch>
  </v-flex>
</v-layout>
<div class="buys">
  <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"
  >

  </ag-grid-vue>

Here is the relevant bound data

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,

Here are the functions/watchers

    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()
    },

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.

Actual: Grid seems to be one step behind (shows floating filter when switch is false).

回答1:

In my comment I suggested fixing it with setTimeout(..., 0):

https://plnkr.co/edit/9NAfPeEu8GgJw7okqz77?p=preview

watch: {
    filterSwitch () {
        // logs correctly with value of filterSwitch
        console.log('filterSwitch', this.filterSwitch)
        setTimeout(() => {
            // refresh header after value of floating filter has changed
            this.gridApi.refreshHeader()
        }, 0);
    }
},

Here's some general information: Why is setTimeout(fn, 0) sometimes useful?

In React (which I know) I would use the setState callback:

this.setState({
    filterSwitch: !filterSwitch,
}, () => {
    this.gridApi.refreshHeader();
});

I don't know if there's a Vue.js equivalent, but setTimeout(..., 0) accomplishes a similar thing.

来源：https://stackoverflow.com/questions/54444857/toggle-floating-filter-in-ag-grid

标签

javascript

Vue.js

ag-grid