DataGrid with client-side filtering and searching
I am working on reusable Flex 3 DataGrid extension allowing client-side filtering and searching, and probably many other features in the future. Although it is not finished yet I decided to publish the result of my work to get some feedback from you:-)
The project source repository is located at http://code.google.com/p/reusable-fx/
You can also view source of the example below.
I consider few things extremely important when creating new components:
Reusability
New DataGrid component should work not only for one cool demo but could be reused and reconfigured in many different applications. Every newly added element should support styling and/or skinning.
Extensibility
New DataGrid should allow further extension without need to rewrite too much code. During implementation of new features standard, well documented interfaces and patterns should be created to make further development easier. For example current version support filtering of text and numerical data but creation of filter for date ranges or images should be straightforward.
Compatibility
Compatibility with standard Flex DataGrid should be regarded very important and every incompatibilities should be well documented. For example one should be able to use filtering on one column when leaving other columns unchanged. Newly created interfaces should be similar to those known from standard Flex components.
I am trying to follow the rules above but of course it is not always possible. Especially if you are working on something for a long time it is difficult to tell what is intuitive for “ordinary user”. So if you play with example below and found something which in your opinion should work differently don’t hesitate to add a comment or create new issue on http://code.google.com/p/reusable-fx/issues/list !
Summary
MDataGrid can be used just like standard DataGrid: you define a dataProvider and columns either in MXML or in ActionScript. If you want a column to allow filtering replace DataGridColumn with MDataGridColumn which by default has a text wildcard filtering enabled. If you prefer to filter column in a different way change filterEditor property of the column to point to some filter editor from com.iwobanas.controls.dataGridClasses.filterEditors package. You can find more information in the ASDoc in the source code.
Example
This example demonstrates live searching and filtering MDataGrid with about 400 rows.
View source is enabled, you can download zipped sources from here.
For better experience open example in separate window.
Hi Iwo,
Great Work!
Is there any progress with the headerWordWrap?
Thanks Dennis
Hi Dennis,
I’ve recently changed job (and moved to UK) and unfortunately I don’t have time to develop my components. Hope I’ll find some time after settling here:-)
The problem is caused by CSS namespaces introduced in Flex 4.
To fix it you can add namespaces to defaults.css file.
@namespace mdgc "com.iwobanas.controls.dataGridClasses.*"; @namespace mdgfe "com.iwobanas.controls.dataGridClasses.filterEditors.*"; mdgfe|DropDownFilterEditor{ ... } mdgc|DropDownFilterHeaderRenderer{ ... }I’ll not commit this changes now since they are supported only by Flex 4.
Hi, Sorry for the delayed response, I’m really busy recently.
By default MDataGrid is using a local copy of data provider and doesn’t support removing/modifying items.
You can try setting
copyDataProvider=falseso that data provider will not be copied but I can’t guarantee that this will support deleting items.Hi, I am using this component. But instead of DataGrid , I am using AdvancedDataGrid. In such case, the default sorting is not working. Can you please help me?
Ya..it’s working now
i forgot to give sortExpertMode. thank you for giving such a wonderful component
I was testing the component and I get the following error:
TypeError: Error #2007: El valor del parámetro blendMode debe ser distinto de null.
at flash.display::DisplayObject/set blendMode()
at mx.skins.halo::HaloFocusRect/updateDisplayList()
at mx.skins::ProgrammaticSkin/validateDisplayList()
at mx.managers::LayoutManager/validateDisplayList()
at mx.managers::LayoutManager/doPhasedInstantiation()
at Function/http://adobe.com/AS3/2006/builtin::apply()
at mx.core::UIComponent/callLaterDispatcher2()
at mx.core::UIComponent/callLaterDispatcher()
at flash.utils::Timer/_timerDispatch()
at flash.utils::Timer/tick()
please help!!
It looks like problem with incompatible Flex SDK version used to build swc library and your application.
Try using the latest Flex SDK (3.5) and checkout latest MDataGrid sources from http://code.google.com/p/reusable-fx/source/checkout .
Iwo – I allowed the header to wrap by changing the Label component to Text component in DropDownFilterHeader. Since I always want it to wrap, I hardwired this – a more elegant solution would check the datagrid for whether truncateToFit was true and to make it a Label if it is true and make it a Text if it is false.
I am playing around with Flex 4 with this component everything looks to be firing except css which i changed and backgroundcolor which i changed to contentBackgroundColor . I am a bit stuck with column.filter.isActive it does not seem to be firing correctly as the style is nver changed to dataGridFilterButtonActive . Any Pointers are greatly apreciated .. this is a great component !!!
Hi kenneth,
make sure that you have set the
filter-button-active-style-namestyle on DropDownFilterHeaderRenderer, other ways it doesn’t know which style to use when filter is active (it should read the default value form dafaults.css so it is better to override styles than to edit defaults.css directly). The configuration which works for me looks like this:@namespace mdgc "com.iwobanas.controls.dataGridClasses.*"; mdgc|DropDownFilterHeaderRenderer{ filter-button-style-name: dataGridFilterButton; filter-button-active-style-name: dataGridFilterButtonActive; }Hi Iwo,
Nice concept!
Can we extend it for AdvancedDataGrid also?
Thanks,
- Zeeshan
Hi Iwo, Extremely great and helpful tool.
I converted your code for Advanced Datagrid. It works fine. But as soon as i group it, the data is not seen, the advanced data grid goes blank.
I am using Flex 3 and sdk 3.2 for compiling. Any help is highly appreciated as the requirement is of fitering as well as grouping.
Newbie using Flex.
I was able to get the swc file from the google code repository.
I am doing Flex coding using only command line compiler + notepad.
How do I use the SWC into my application and compile it?
I am particularly interested in using the MDatagrid control.
Appreciate your response. Thanks.
Hi Iwo ,
Great Component. I am trying to add a reset button , such that once user has selected few filters and then clicks on reset.. all the search text entered in the filters is removed and the datagrid shows original set of values… Button am i am unable to get hold of the editors for each column which are active and having some filter text.. Can you pls help tp reset the datagrid to original values..
Iwo,
Instead of using the SWC, what I did was to simply reuse the source codes which you have posted in google code. things are compiling fine right now.
i stumbled upon another issue. when i try to use another dataprovider (xmllistcollection) which is coming from a web service call, the data does not come out or display in the datagrid you created. i hope you could point me in the right direction to tackle this.
thanks.
MDataGrid should support XML based data providers. Make sure that you defined dataField’s correctly. You can also check if your configuration works with standard DataGrid and than switch to MDataGrid.
Cheers,
Iwo
Hi Jash, Checkout the latest sources from SVN http://code.google.com/p/reusable-fx/source/list . The reseting function is implemented there. Cheers, Iwo
@Iwo Banas
Hi Iwo,
I have defined the datafields correctly.
In the MDataGrid dataprovider, I specified the xmllistcollection data provider like this:
and in the MXML, I also specified the xmllistcollection like this:
I specified a variable for the Orders:
// XML Variable for Orders
[Bindable] private var xmlOrders:XML;
When I specify the dataProvider such as:
dataProvider=”{xmlOrders.Table}”
the data appears in the datagrid, but using this declaration:
dataProvider=”{xmllcOrders}”
the data does not appear.
I tried using both ways in an ordinary datagrid and things does seem ok.
any other advice?
I forgot to mention that I specified the xmllistcollection like this:
mx:XMLListCollection id=”xmllcOrders” source=”{xmlOrders.Table}”
@Iwo Banas
Hi, Iwo,
Nice work!
Run in Flex4 and added the namespaces in the default CSS and it worked. However, the filter button never change to the active icon (the red one) when I pressed the filter button and type some search characters. Seems like it did not execute the function commitProperties(). The filter-button-active-style-name: dataGridFilterButtonActive is set correctly
Great work Iwo. Quick question, is there a way to preselected filters ?
For example I want to data range but I want it to be show last 2 weeks as pre filtered before. Thanks in advance…
Hi Cenker,
It is possible although it isn’t very straightforward now (but it’s quite high on the TODO list so I may implement it soon).
See the previous comments under this post for the instruction on how to preset filters values.
Cheers, Iwo
@Iwo Banas
Hi Iwo,
I tried tweaking the DropDownFilterHeaderRenderer.as file to match those style declarations in the default.css file to no avail. The filter button does not get red when a filter is active.
Funny thing is that when I tried to compile the application using Flex 3.4, the filter button is able to capture the CSS styling but compiling this with 3.5 and 4.0, the CSS is not captured, thus even when there is a filter existing on the column, the filter button is not red out.
Any other suggestions?
Iwo,
Other than the CSS fix mentioned above is there anything else to do to use the component in a Flex 4 application? Do you have to do anything with namespace of the app or changing to spark components?
Thanks,
This component could be used AdvancedDataGrid?