gantt for extjs: clear all filters(and css) on gantt by clicking on a button

[racing-enedis]

Hello dongryphon,

Sorry, but can't find any addfilter method on the plugin :

this.gantt.plugins.find(r => r.$className === 'Ext.grid.filters.Filters'))

.

[dongryphon]

The method would be found on the prototype object... You can expand that in the debugger or check:

p = this.gantt.plugins.find(r => r.$className === 'Ext.grid.filters.Filters'))
p.addFilter

(with a capital "F")

[racing-enedis]

Hello dongryphon,

Get it work by this code :

this.gantt.findPlugin('gridfilters').grid.columnManager.getHeaderByDataIndex('Typologies').filter.setValue([VALUES)]);

But this code

this.gantt.findPlugin('gridfilters').grid.filters.clearFilters();

as I already mention doesn't clean/clear values in grid. And I didn't find yet a solution. Could you help please?

Thanks in advance!

[dongryphon]

After looking at the source code for the gridfilters plugin a bit further, it looks like it stashes a reference to itself on its grid by the name "filters". This means you won't need the findPlugin() call after all:

p1 = this.gantt.filters;
p2 = this.gantt.findPlugin('gridfilters');
p1 === p2;   // true

Also, the plugin stashes its grid reference on itself by the name "grid", so this come back full circle to where you started:

this.gantt === this.gantt.findPlugin('gridfilters').grid;   // true
this.gantt.filters === this.gantt.findPlugin('gridfilters").grid.filters;  // true

Using these undocumented references to call clearFilters:

this.gantt.filters.clearFilters()

If you want to avoid these undocumented references and stick with findPlugin:

this.gantt.findPlugin('gridfilters').clearFilters()

Anyway, as to managing the filters and the UI: all of these interactions are handled by private and undocumented pieces of Ext JS. Sadly, this means there is no "API" to go by and all we have is the source code, but at least we have that.

The clearFilters method simple calls "filter.setActive(false);" on the column filter objects. Looking at the source code for that undocumented method of the list filter type:

    setActive: function (active) {
        if (this.active !== active) {
            // The store filter will be updated, but we don't want to recreate the list store or the menu items in the
            // onDataChanged listener so we need to set this flag.
            // It will be reset in the onDatachanged listener when the store has filtered/cleared filters.
            this.preventDefault = true;
            this.callParent([active]);
        }
    },

It does nothing with its UI (i.e., its menu items). Since "clearFilters" is actually a public method, this looks like a bug in the Ext JS gridfilters plugin. It seems reasonable to expect the UI to have no checked items after calling "clearFilters".

To work around this bug, you would have to directly update the components produced by the gridfilters plugin to achieve the desired outcome. For reference, you can see how the list filter uses its ".menu.items" in its private setValue method.