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

[racing-enedis]

Hello,
We need to clear all filter when desactive a button(fdo in our case).
for example after adding filters and in case "fdo" in column "Types activité" is checked, the button fdo on rigth top is actived.

filter_on_end_date_and_activities_types.png (47.52 KiB) Viewed 2775 times

And a click on this button may clear all filters.

gantt.taskStore.clearFilter()

clear all filter but css(style) is not clear. I try to remove css in dom

div.classList.remove('x-grid-filters-filtered-column')

==> it works, but when reclicking on header column the style reappears.

clear_all_filters.png (66.22 KiB) Viewed 2775 times

There is a proper way to clear filters on tasks and style in headers columns?

Thanks in advance!

[mats]

Confirmed, probably a bug in Ext JS. We'll see if we can find a workaround: https://github.com/bryntum/support/issues/8128

[mats]

You should call clearFilters() on your gridfilters plugin instead, which works fine.

[racing-enedis]

Hello Mats,

Thanks for your reply.
Calling clearFilters() on gridfilters plugin works fine (but checked field remains
). The same issue is in your demo sample.

Also when we activate fdo button, taskStore filter is OK, but field is not check in gantt grid:

Any suggestion please?

[dongryphon]

You mentioned this happens in one of the Bryntum demos... could you drop a link to where you saw this issue? I've checked out the Filtering (https://bryntum.com/products/gantt/examples/filterbar/) and Advanced Filtering (https://bryntum.com/products/gantt/examples/fieldfilters/) demos but they do not have the type of filtering in your screenshot.

Given the screenshots you've posted, it appears there is code related to the FDO toggle button that manipulates the filters that needs to do so in a way compatible with the filter menu. If you could post those pieces that would perhaps help clarify what is going wrong between them.

[racing-enedis]

Hello,
Thanks for your reply.

1. yes, here the link: https://bryntum.com/products/gantt-for-extjs/examples/advanced/#en
   
   

2.
Below my function to filter datas by FDO :

filterDatasByFdo = () => {
   this.gantt.taskStore.filter({
      id: this.FILTRE_FDO_ID,
      reapplyFilterOnUpdate: true,
      property: 'Typologies',
      value: [this.getTypologieFdoId()],
      operator: 'inside',
    });};

This function will filter correctly datas, but it doesn't check the checkbox on the menu filters and the style of the column name is not italic :

Maybe taskStore.filter has no impact on grid. I'm trying to call function addFilter(https://docs.sencha.com/extjs/6.2.0/classic/src/Filters.js.html#Ext.grid.filters.Filters-method-addFilter) on plugin gridfilters but this does'nt work, I got error addFilter is not a function.

Thanks in advance!

[dongryphon]

The Ext JS gridfilters plugin does not use the store's filters to determine its presentation but works in the reverse direction. The UI controls adding and removing filters from the store. Ext JS has no documented way that I can see to cooperate with these menus and check states, but the column components do gain a "filter" property. You can see how the code does this in https://docs.sencha.com/extjs/6.2.0/classic/src/Filters.js.html#Ext.grid.filters.Filters-method-addFilter

In this case, for the FDO column, that should refer to type=list filter (https://docs.sencha.com/extjs/6.2.0/classic/src/List.js-2.html#Ext.grid.filters.filter.List-cfg-options) instance. That object has a "menu" property that you can use to check/uncheck the items. This should first put the UI in the desired state (as if the user did the clicking) and that should affect the filter of the store.

[dongryphon]

To synchronize your FDO toggle from the menu, you'll probably need to listen for the checkchange event https://docs.sencha.com/extjs/6.2.0/classic/Ext.menu.CheckItem.html#event-checkchange

[racing-enedis]

Hello,

Thanks for your reply,

I already try this one https://docs.sencha.com/extjs/6.2.0/classic/src/Filters.js.html#Ext.grid.filters.Filters-method-addFilter
But got error "addFilter is not a function". Would be nice if you have an example.

Thanks!

[dongryphon]

I suspect the reason you get the error "addFilter is not a function" is because you've got the wrong object.

I do not see any great identifying properties on the gridfilters plugin instance that would help you know for sure you have the right one other than the undocumented "$className" property. In this case, that property value is "Ext.grid.filters.Filters".

Checking out the demo:

gridfilter-pkugin-addFilter.png (247.09 KiB) Viewed 950 times

In the image there I just ran a forEach loop over the "plugins" array on the grid component.

This code should get you the correct plugin instance from the grid:

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

From there, linking the toggle with the filter menu will rely on all the undocumented/private pieces of Ext JS previously mentioned.