GridFilters - enhanced filtering for grids

[george4rotech]

When calling clearFilters however, although the data is reverted, the filter's input field retains the previously entered value.

The following override is a step toward addressing this issue. A simpler (more naive?) solution would have been to call "filter.setValue('')" inside clearFilter's original "this.filters.each(function (filter) {" loop, but setValue on most of the filters (at least the ones I read) also invoked the update event, which I don't think is desirable in this case.

Feedback appreciated.

(function() {
    var originalClearGridFilters = Ext.ux.grid.GridFilters.prototype.clearFilters;
    
    Ext.override(Ext.ux.grid.GridFilters, {
        clearFilters: function() {            
            originalClearGridFilters.apply(this, arguments);
            
            this.filters.each(function (filter) {
                //prevent filter's update event from being called by setValue
                var filterUpdateEvent = filter.events['update'];
                delete filter.events['update'];
                
                filter.setValue('');
                filter.events['update'] = filterUpdateEvent; //revert
            });
        }
    });
}());

[msinn]

Hello,

would you please help me to get working the Filters on comboboxes with JsonStores?
I have here a test-case:

http://www.extjs.com/forum/showthread.php?101236-EditorGridPanel-Filters-don-t-apply-on-comboboxex-with-stores-Summary-Grouping-is

Thank you a lot, a lot
Marius

[zeruyo]

The following override is a step toward addressing this issue. A simpler (more naive?) solution would have been to call "filter.setValue('')" inside clearFilter's original "this.filters.each(function (filter) {" loop, but setValue on most of the filters (at least the ones I read) also invoked the update event, which I don't think is desirable in this case.

Feedback appreciated.

(function() {
    var originalClearGridFilters = Ext.ux.grid.GridFilters.prototype.clearFilters;
    
    Ext.override(Ext.ux.grid.GridFilters, {
        clearFilters: function() {            
            originalClearGridFilters.apply(this, arguments);
            
            this.filters.each(function (filter) {
                //prevent filter's update event from being called by setValue
                var filterUpdateEvent = filter.events['update'];
                delete filter.events['update'];
                
                filter.setValue('');
                filter.events['update'] = filterUpdateEvent; //revert
            });
        }
    });
}());

Great solution. I tried to replace the update event 'hiding' with filter.suspendEvents() but it didn't work.
Thanks

[Override]

Hi.
Can you help me please: how I can submit to server value of id, not text in ListFilter?

[asbestos girl]

Override, can you please post the relevant snippets of your code?

[SunWuKung]

Hi,
I have many columns in my grid (most of them normally hidden). When I want to check if a filter on them is on/off or I want to change the filter I first need to make them visible.

I was wondering if anybody has done some sort of filter manager eg. from a menu on the grid where the filters on the grid were listed and you could do the same functions then you do from the column header (switch on/off, change).
If yes could you please post the sample?

Many thanks.
SWK

[asbestos girl]

Hi SWK,
I am not going to post an example as i dont have one and no time to write it, but it is definitely possible. Check out the documentation for the ux here: http://extjs-ux.org/docs/index.html, expand the menu tree there to GridFilters and Filter folders, and check out there available methods to get the data you need.

[Override]

Hi.
Can you help me please: how I can submit to server value of id, not text in ListFilter?

Override, can you please post the relevant snippets of your code?

Actually, can't - already resolved by changing ListMenu.js, used by ListFilter.
By default, ListMenu creates internal store based on ListMenu.labelField property and value.id.

Shortly about changes: valueField property added to ListMenu class, and 'valueField'-related processing added to ListView store and events.

Solution is not tested for all cases and stores, however, it allows me to use JsonStore for ListFilter, like this:

new Ext.ux.grid.GridFilters(
{
		{
			type: 'list',
			dataIndex: 'AdministrativeAreaID',
			labelField: 'Name',
			valueField: 'ID',	//allow send value of this property to server
			phpMode: true,
			store: MyCache.GetStore("AdministrativeAreas") //returns new JsonStore with MemoryProxy
		}
}

...and send following data to server during grid request:
filter[0][data][type] list
filter[0][data][value] 4,26
filter[0][field] AdministrativeAreaID

Changed ListMenu.js attached.

Thanks.

[Reimius]

Hey guys... I ran into this huge issue (for us anyway) while using GridFilters that has an easy fix. Our business requirements have grids that require things like '%' and '$' to actually be in the store values (because the output is not only used for Extjs grids). This is easy enough to work around with data stores with the custom sorting method and grids, but this plugin did not work when a filter was set to 'numeric' and the field type in the store was set to 'string' and contained values like '25%' and such. I modified the 'validateRecord' function in the NumericFilter.js file to have the following code to make filtering work in the situation I described above. I would also appreciate people's comments if they see any potential problem with this fix or a better way to go about this, thanks.

validateRecord : function (record) {
        var val = (record.get(this.dataIndex) + "").replace(/([^0-9\.])/g, ""),
            values = this.getValue();
        if (values.eq !== undefined && val != values.eq) {
            return false;
        }
        if (values.lt !== undefined && val >= values.lt) {
            return false;
        }
        if (values.gt !== undefined && val <= values.gt) {
            return false;
        }
        return true;
    }

As you can see, I'm just using a regex expression to extract the numbers and/or decimal places out of the text.

[ldonofrio]

I have a number of re-usable stores loaded into Ext.StoreMgr and all have a storeId and are used in several places throughout an application. When I destroy the gridfilters it also takes the re-usable stores with it, which causes errors when other parts of the application try to start using the store.

I've implemented this override to fix the problem, you might consider adding it to the sauce as normally if you create a store without a storeId you won't re-reference it and can destroy/re-create at your pleasure.

Ext.override(Ext.ux.menu.ListMenu,{
destroy : function () {
if (this.store.storeId == undefined ) {
this.store.destroy();
}
Ext.ux.menu.ListMenu.superclass.destroy.call(this);
},
});

true i'm usign autoDestroy flag to override

Ext.override(Ext.ux.menu.ListMenu, {
    destroy: function() {
        if (this.store && this.store.autoDestroy) {
            this.store.destroy();
        }
        Ext.ux.menu.ListMenu.superclass.destroy.call(this);
    }
});