Grid Filter (Plugin)

[ambience]

Moderator edit: There's a 3.x version in svn now for those interested, click here.

Example: http://ccinct.com/lab/filter-grid/

I am excited to hear that a number of people have started using / extending the filters. If you have an extension (like some sort of panel based filter configuration) PM me with a link to the related thread and I will link it here. Thanks to every one who has helped bang out bugs and assisted newer users.

Also, I would like to credit ControlPath, the company that pays for my time =) The filters were developed to support an ongoing effort to transition the product to a 100% Ext UI and they were kind enough to let me share the code with you guys.

Server Side Code
Due to copyright issues I cannot share my implementation of the server side code (written in Java), and the PHP is to entangled in a bigger framework / hacked together to share. If you have an implementation you would like to share, PM me with the files and I will link them here.

PHP

• http://www.vinylfox.com/extjs/grid-f...ckend-code.php - Thanks VinylFox

Ruby on Rails

• http://extjs.com/forum/showthread.php?p=77326#post77326 - Thanks Zyclops
• http://extjs.com/forum/showthread.ph...596#post176596 - Thanks Rotomaul

Python

• http://www.debatablybeta.com/posts/u...g-with-django/ - Thanks Matt

Grails

• http://mcantrell.wordpress.com/2008/...ds-and-grails/ - Thanks Mike

Initial Release

• Grid filters now function as a plugin for the grid. As a result you can use them in conjunction with custom views (like grouping).
• List filters are now much more robust in that you can provide them with a Ext.data.Store to load their options the first time they are shown.
• This version does not have a a dynamic loader included, read the source to find out where to put yours (documented).
• The way filters are configured has changed ever so slightly.
• Now 100% Ext (Prototype-free).

Version 0.2

• Local filtering can now be enabled by passing the 'local: true' as a config value
• Fixed some of the filters setValue functions.
• Stateful mode can now be enabled by passing a string value for the config option 'stateId'. This may be updated in the next Ext code push to store this information when the grid saves/restores its state. However, the events required are not part of the current beta (I think they are in SVN however)
• Add an 'autoReload' field / config option that defaults to true. Set this to false if you wish to prevent the datastore from being reloaded when you make changes to the filters.

Version 0.2.1 (Minor update, thanks for the feedback)
Bug Fixes

• Date filters will disable conflicting date ranges [Thanks hendricd]
• Added missing super constructor line to Filter [Thanks hendricd]
• Boolean filters now use uniqu radio group IDs (so you can have more then one!) [Thanks olive38]

Enhancements

• Added a 'serialize' event to the Filter class. Using this you can attach additional parameters to serialization data before it is encoded and sent to the server.
• You can pass the GridFilters object as a plugin to the paging toolbar and it will reset the page to 1 whenever you update the filters.
• Boolean filters take a defaultValue config parameter. Set this to null if you do not want either option to be checked by default.

Version 0.2.2, 0.2.3, 0.2.4, 0.2.5
Bug Fixes

• Fixed an issue with numeric fields displaying "NaN" initially in RC1 [Thanks JeffHowden]
• Fixed an issue with filter application in the absence of request options [Thanks JorisA]
• Date format is now forwarded to the date selectors [Thanks hendricd]
• Small bug fix with filters being activated before a load event on grids with the filters used as a plug in to the paging tool bar *inhale* [Thanks hendricd]
• Fixed a global namespace leak. [Thanks hendricd]
• Reload now cancels the deferred update. [Thanks ericwaldheim]
• Local string filtering is now case insensitive . [Thanks robasi]

Version 0.2.6
Bug Fixes

• Removed a console.log in applyState(), oops >.<

Enhancments

• The filter collection will now bind to the 'beforestaterestore' and 'beforestatesave' events in order to be stateful. Set your stateId on the associated grid.
• Future versions will now include the version number in the header of GridFilters.js for your convenience

Version 0.2.7 June 4th, 2008
Enhancments

• Add some localization support (post) [Thanks wm003]
• Tweeked EditableItem to have better icon support (post) [Thanks AlxH]
• Added green tinted column header graphics and CSS classes for filtered columns
• Icons are now all defined as styles in the resources/style.css file. You'll need to link to this in order to have them and get the new column header style. (no more need for prototype changes)

Version 0.2.8 August 22nd, 2008
Enhancments

• Refactored ListFilter.js to use a new Ext.ux.menu.ListMenu component.
• I've included Ext.ux.menu.TreeMenu, I can't really offer allot of support for it, but it's what we use for tree filters.

Bug Fixes

• Fixed text selection and general carrot wonkyness in Firfox [Big Thanks to Steffen Hiller]
• You can now use apostrophes in Firefox 3 o.O

[krycek]

Perfect. I can't imagine a better way to do that.
But I think I've found a bug, try to do as follow:
1. Resize the width of one column making the last column not visible on the grid panel (a horizontal scrollbar will be shown)
2. Go to the second page
3. Create a filter in the "Visible" column to show just "No" visibles records

After doing that I can't remove this filter anymore because the scrollbar is gone and the grid will no longer show any data because I'm on the second page that has no records.

In this particulary case, going back to the first page after any filtering, solves the problem. But what if after setting a filter on the last column made the grid show no records? In this case I wouldn't be able to remove the filter anymore.

[ejetorix]

Fantastic job Ambience.

BTW, problems like krycek has noticed, are the reason for what i prefer a separate panel/region/whatever for filtering, instead of rendering it on columns menu.

Thank you for porting it to 2.0 branch in so little time.

[Foggy]

Excellent work, thanks for sharing

[6epcepk]

Waiting for beta-version =)
Thanks!

[ambience]

In this particulary case, going back to the first page after any filtering, solves the problem. But what if after setting a filter on the last column made the grid show no records? In this case I wouldn't be able to remove the filter anymore.

I agree that this is a problem. However I think that it may also be a small shortcoming in the base grid widget. I believe that a scrollbar should be present if the headers exceed the current view port and there is no data. I may be able to convince the paging tool bar to go to the first page by firing the appropriate events on the store when the filter configuration has changed and will look into that.

As a small work around, you could add a 'clear filters' button to your paging tool bar and bind its handler to filters.clearFilters(). If you wanted to get even more fancy, you could build a menu button that had items for each of the configured filters. I will add a 'filteradded' event to the GridFilters to help facilitate this.

Thanks for the feedback.

[jack.slocum]

Great work ambience. Thank you for sharing, I am sure there are many who will find this useful!

[franklt69]

very cool the filter, is there any way to do filter in the side client only for instance or it is only to server side?

regards
Frank

[osamaao]

Hello,

Thanks for this nice filter feature.
I have a question please, I am new to extjs and I am trying to make an example running, I am using your filter-grid, DWR and Spring.

The problem is that I can't read the filter parameter on the Java side.. I am not sure of the parameter name. shouldn't it be "filters"?

Appreciating your help.

[ambience]

By default the field is 'filter', with out the 's'. But that is configurable with the 'paramPrefix' confg option. For example:

    plugins: new Ext.ux.grid.GridFilters({paramPrefix: 'omgBearIsDriving'});

Additionally, the filter param will be expressed as an array of objects for example:

filter[0][data][type]=string
filter[0][data][value]=Geek
filter[0][field]=name
filter[1][data][type]=list
filter[1][data][value]=medium,large,extra large
filter[1][field]=size

If you wish to change how the data is structured and sent to the server you can either extend GridFilters and overload the 'buildQuery' function or pass a new function as config option:

    plugins: new Ext.ux.grid.GridFilters({
        buildQuery: function(filters){
                var p = {};
		for(var i=0, len=filters.length; i<len; i++){
                    // Custom filter serialization
		}
		
		return p;
        }
    });