ag-grid custom filter adding a clear filter button. JS not Angular

Question

Using the example on the ag-grid site I have written a filter based on a RAG status. The vaules can be either Undefined, Red, Amber, Green, or Complete.

Using the PersonFilter example at https://www.ag-grid.com/javascript-grid-filter-component/, I am using an array to add clicked values to, to then filter the grid on. This works really well. However it is my intention to clear the filter via a clear button.

Here is the code I have so far:

RagFilter.prototype.setupGui = function (params) {

            this.filterText = [];
            this.gui = document.createElement('div');
            this.gui.innerHTML =
                '<div style="padding: 6px; width: 150px;">' +
                    '<div><h3>RAG Filter</h3></div>' +
                    '<div><span class="icon icon-rag-s-undefined" data-value="undefined"></span>&nbsp;' +
                        '<span class="icon icon-rag-s-red" data-value="red"></span>&nbsp;' +
                        '<span class="icon icon-rag-s-yellow" data-value="yellow"></span>&nbsp;' +
                        '<span class="icon icon-rag-s-green" data-value="green"></span>&nbsp;' +
                        '<span class="icon icon-rag-s-blue" data-value="blue"></span>' +
                        '<a href="#" id="clear_filter" class="btn btn-primary btn-sm" data-filter="rag">CLEAR</a>';

            var that = this;
            $('body').on('click', '.icon',  function(e){
                if (that.filterText.indexOf($(e.target).data('value'))) {
                    that.filterText.push($(e.target).data('value'));
                }
                params.filterChangedCallback();
            });
            $('body').on('click', '#clear_filter',  function(e){
                e.preventDefault();
                var filter = $(this).data('filter');
                var filterComponent = params.api.getFilterInstance(filter);
                filterComponent.setModel(null);
                this.filterText = null;

            });
        };

This method is taken from the example at https://www.ag-grid.com/javascript-grid-filter-component/ using the PersonFilter.

I have tried the click event handler for the button outside of the filter code as well:

$('body').on('click', '#clear_filter',  function(e){
                e.preventDefault();
                var filter = $(this).data('filter');
                var filterComponent = gridOptions.api.getFilterInstance(filter);
                filterComponent.setModel(null);
            });

and I consistently get an undefined error for the variable filterComponent. The variable filter is set to 'rag' which comes from the data-filter attribute on the clear button.

I keep going round and round with this and can't seem to find a clear tutorial or code example that does exactly what I want to achieve.

All help is greatly appreciated..

Cheers

Answer 1

After much fiddling around with the code I worked out that you actually need the colDef.colId value and not the field name as the documentation suggests:

$('body').on('click', '#clear_filter',  function(e){
                e.preventDefault();
                var filterComponent = params.api.getFilterInstance(params.colDef.colId);
                that.filterText = null;
                params.api.onFilterChanged();
            });