Cannot read property ‘setQuickFilter’ of undefined” in ag-grid Vue

Total
13
Shares

I try to filter the ag-grid by using a select box. The grid definition is:

<ag-grid-vue id="myGrid" style="width: 1140px; height:500px"

   class="ag-theme-balham"
   :columnDefs="columnDefs"
   :rowData="rowData"
   :enableSorting="true"
   :enableFilter="true"
   :pagination="true"
   :paginationPageSize="10"                                    
   :setQuickFilter="quickFilterText"
</ag-grid-vue>

Data Part is :

data() {
            return {
                columnDefs: null,
                rowData: null,
                quickFilterText: ''
     }

and i try to capture the value of select box on watch in Vue:

watch: {

    filter: {
        handler: function (filter) {
            {
                this.$nextTick(() => {
                    let companyNames = this.$refs.company.getSelectedValue();
                    this.quickFilterText = companyNames;
                    gridOptions.api.setQuickFilter(this.quickFilterText);
                    document.addEventListener('DOMContentLoaded', function() {
                        let gridDiv = document.querySelector('#myGrid');
                        new agGrid.Grid(gridDiv, gridOptions);
                    });
                });
            }
        },
        deep: true
    }
},

after i select in select box then i see the error:

“TypeError: Cannot read property ‘setQuickFilter’ of undefined”

any one can help me? thank you


Solution

Check this post

You need to use gridReady function to bind gridApi to the local property.

Once you will bind it, you would be able to use
this.gridApi.setQuickFilter(this.quickFilterText);

Leave a Reply

Your email address will not be published. Required fields are marked *