Home > DataGrid, reusable components > DataGrid with client-side filtering and searching

DataGrid with client-side filtering and searching

June 17th, 2009

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.

  1. Dennis (Germany)
    January 25th, 2010 at 17:26 | #1

    Hi Iwo,
    Great Work!
    Is there any progress with the headerWordWrap?
    Thanks Dennis

  2. Iwo Banas
    January 31st, 2010 at 22:12 | #2

    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:-)

  3. Iwo Banas
    January 31st, 2010 at 22:20 | #3

    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.

  4. Iwo Banas
    January 31st, 2010 at 22:25 | #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=false so that data provider will not be copied but I can’t guarantee that this will support deleting items.

  5. RajPrabha
    February 10th, 2010 at 06:18 | #5

    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?

  6. RajPrabha
    February 10th, 2010 at 09:01 | #6

    Ya..it’s working now
    i forgot to give sortExpertMode. thank you for giving such a wonderful component

  7. Chacal
    February 22nd, 2010 at 19:04 | #7

    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!!

  8. Iwo Banas
    February 22nd, 2010 at 23:17 | #8

    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 .

  9. Bea
    February 24th, 2010 at 21:14 | #9

    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.

  10. kenneth
    March 1st, 2010 at 20:37 | #10

    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 !!!

  11. Iwo Banas
    March 2nd, 2010 at 15:25 | #11

    Hi kenneth,
    make sure that you have set the filter-button-active-style-name style 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;
    }
    
  12. Zeeshan
    March 5th, 2010 at 23:03 | #12

    Hi Iwo,

    Nice concept!

    Can we extend it for AdvancedDataGrid also?

    Thanks,

    - Zeeshan

  13. Esha
    March 25th, 2010 at 06:34 | #13

    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.

  14. BatutaBunsing
    April 1st, 2010 at 22:56 | #14

    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.

  15. Jash
    April 5th, 2010 at 14:58 | #15

    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..

  16. BatutaBunsing
    April 5th, 2010 at 16:40 | #16

    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.

  17. Iwo Banas
    April 7th, 2010 at 19:58 | #17

    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

  18. Iwo Banas
    April 7th, 2010 at 20:24 | #18

    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

  19. BatutaBunsing
    April 13th, 2010 at 23:32 | #19

    @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?

  20. BatutaBunsing
    April 13th, 2010 at 23:50 | #20

    I forgot to mention that I specified the xmllistcollection like this:

    mx:XMLListCollection id=”xmllcOrders” source=”{xmlOrders.Table}”

  21. David
    April 14th, 2010 at 07:35 | #21

    @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

  22. Cenker Ozkurt
    April 14th, 2010 at 20:59 | #22

    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…

  23. Iwo Banas
    April 15th, 2010 at 22:39 | #23

    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

  24. BatutaBunsing
    May 17th, 2010 at 23:48 | #24

    @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?

  25. June 4th, 2010 at 14:27 | #25

    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,

  26. Leonardo
    June 13th, 2010 at 01:11 | #26

    This component could be used AdvancedDataGrid?

Comment pages
1 2 83
  1. December 5th, 2009 at 22:02 | #1