How do I reset all filters in Extjs Grids?

Question

How do I reset my ExtJS filters in my grids. More specifically, how do I get the header to honour the changes to the filtering.

ie. This works fine :

grid.store.clearFilter();

But the header rendering is all wrong. I need to get into all the menu objects and unselect the checkboxes.

I am getting pretty lost. I am pretty sure this gives me the filterItems :

var filterItems = grid.filters.filters.items;

And from each of these filter items, i can get to menu items like so :

var menuItems = filter.menu.items;

But that's as far as I can get. I am expecting some kind of checkbox object inside menu items, and then I can uncheck that checkbox, and hopefully the header rendering will then change.

UPDATE :

I now have this code. The grid store has its filter cleared. Next I get the filterItems from grid.filters.filters.items and iterate over them. Then I call a function on each of the menu items.

    grid.store.clearFilter();

    var filterItems = grid.filters.filters.items;

    for (var i = 0; i<filterItems.length; i++){

        var filter = filterItems[i];

        filter.menu.items.each(function(checkbox) {

            if (checkbox.setChecked)
                checkbox.setChecked(false, true);
        });
    }

The checkboxes do get called, but still nothing is happening :(

Answer 1

Try this code:

grid.filters.clearFilters();

This should take care of both the grid and its underlying store.

When you do

 grid.store.clearFilter();

it can only clear the filters on the store but the grid's view doesn't get updated with that call. Hence to handle it automatically for both the grid's view as well as the grid's store, just use

grid.filters.clearFilters();

Hope it helps!

Cheers!

Answer 2

Your update help me but you forget the case where you have input text instead of checkbox.

So this is my addition of your solution:

  grid.filters.clearFilters();

    var filterItems = grid.filters.filters.items;

    for (var i = 0; i<filterItems.length; i++){

        var filter = filterItems[i];

        filter.menu.items.each(function(element) {

            if (element.setChecked) {
                element.setChecked(false, true);
            }

            if(typeof element.getValue !== "undefined" && element.getValue() !== "") {
                element.setValue("");
            }                    
        });
    }

Answer 3

When you use grid wiht gridfilters plugin and inovoke

grid.filters.clearFilters();

it reset applyed filters, but it don't clean value in textfield inside menu.

For clean textfield text you can try this:

 grid.filters.clearFilters();
 const plugin = grid.getPlugin('gridfilters');
 let activeFilter;
 if('activeFilterMenuItem' in plugin) {
        activeFilter = plugin.activeFilterMenuItem.activeFilter
  }
 if (activeFilter && activeFilter.type === "string") {
       activeFilter.setValue("");
 }