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.

Share on Google+Share on FacebookShare on LinkedInPin on PinterestTweet about this on Twitter

140 thoughts on “DataGrid with client-side filtering and searching”

  1. Yes Iwo.
    You are right. As it is using the same DataGrid component, it should work with Flex 4 as well. But I think the problem exists in applying the CSS and Skin classes as styling has been changed in Flex 4. Probably that might be the reason, why it is not displaying the Filter Icons. As I am new to flex, it is taking more time for me to figure the right solution for this component. I am still trying to understand the implementation before making any changes. (All new projects are getting started Flex 4 Beta, as it is more comfortable for beginners. But not able to get the much library support for Flex 4. 🙁 )
    Anyway, Thanks for looking into it.
    -Jay.

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

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

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

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

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

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

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

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

  12. 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;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

  29. does not compile. I am using Flex 4.0
    Is there any other way to add image to the column.

    I have tried using following code:

    var personItemRendererFactory:ClassFactory = new ClassFactory( PortfolioImageRenderer );
    personItemRendererFactory.properties = {myFiledName:headers[i].columnDataField};
    dataGridColumn.itemRenderer = personItemRendererFactory;

    It replaces the image but on nay event it does not work properly.

    Please help me 🙁

  30. Hi Iwo,
    Thanks for a great component.
    filter-button-active-style-name style is not being activated. I tried following your example but I guess I have missed something important. What could be wrong? Everything else works.
    Thanks,
    Tommy

  31. Excellent work!

    Works well in flex 3.

    I used this code in Flash 4. The filters went missing. Can you please help me resolve this?

  32. Hi Iwo Banas,
    Thanks for wonderful component. I am trying to make this component work in Flex 4 and tried changing CSS files also. I did not help and filter button does not turn red.
    On debugging, I found that the code never went to commitProperties function in DropDownFilterHeaderRenderer.as once the datagrid has been created. So there was no chance of styles being applied. I even tried to change the width of column after applying filters, still no effect.

    Can you please look into it. Thanks.

  33. Is there a way, I can reset the filters. Like I add a clear Filters button in the control bar and all the filters are removed and all those red buttons turn back to default color.

  34. Hi,

    The component is working for me now. besides the change of CSS style, I included those icon files and defaults.css in Project Properties->Flex Library Built Path -> “Assets” (Flex Builder 4 using Flex SDK 4.1)
    btw, got the latest source from svn repository.

    Hopefully it helps.

  35. Hi,
    Excellent Work I would say for the component. But I have some requirements which is not fully fulfilled by this component.
    Lets say for a datagrid I have name,age,sex and phone as columns.
    And I have set MultipleChoiceFilterEditor for name and sex columns. If I filter from the list of names from the first column data is filtered. And now if I open sex column I want to show only list of ppl whose names are filtered using first filter. Basically I want to filter the “filtered data”. Your component is working like that but what I want when user clicks on the 2nd filter option only those checkboxes should be checked which are already filtered on the first instance. I hope this makes sense. Can you help me out in that.

  36. Absolutely awesome post! Can you explain how to implement with AdvancedDataGrid? Please and Thank You.

  37. @Iwo Banas

    Hi I am using this example with AdvancedDataGrid in extending the AdvancedDataGrid instead of DataGrid in MDataGrid file and changed ColumnDataGrid as AdvancedColumnDataGrid , filters are working fine.
    I need one help, Based on the first filter seletion other filters show only related values(As showing in the datagrid) , Can you suggest me where to change the code?, for resetting the values in filtters I have provided one more button in UI to reasign the dataprovider with original ArrayList. I am new to Flex , kindly help me

    Regards
    Chandru

  39. Hi Iwo,

    Can you please update the latest code for download? MDataGridColumn.as is missing “resetFilter()” function.

    Thanks in advance
    Ambika Prasad

  41. Hi Iwo,
    awsome Application and Great work!

    I want serach on First column by entering text in search Textbox(which is now seraching on Entire Data grid and making bold )

    It’s very urgent…can you suggest how to do

  42. Hi Iwo,
    Thanks a lot for such a wonderful component!I need filters only for specific columns only, rest i want it to work as a normal datagrid column. Can you please let me know how can I do this?

  46. This grid is really good and i was pretty much impressed with the way u implemented the filtering functionality and mainly its extensability

  47. Thx for your greaaat component… But I have a problem while using it. I put this datagrid in a view stack in main application mxml and everytime that I clean my eclipse project and re run the App. , the flex view freezes and nothing is shown. Has anyone ever experienced such a problem?

  48. When I change the data provider on the grid, the column filter gets lost. Is there a way to preserve the column Filter.

  49. Hi Iwo,

    Quick questions, wondering if it’s possible to pre-filter the datas after the creationComplete event or something? And also, is it possible to keep the filter settings even if the dataProvider changes?

Leave a Reply

Your email address will not be published. Required fields are marked *