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. Anyone have a working example in Flex 4 that they can post/share? I’m having a very hard time getting it to work properly in Flex 4. Flex 3.5 works fine. Thanks in advance.

  3. This is a great datagrid.
    However my Flex application stops working (completely) if the datagrid returns no data (correctly) but any of the “filter data” buttons are pressed….
    It would not be a big deal if I simply got an error message…but crashing the whole application is a bit more trajic…
    Has anyone experienced the same problem?

  4. Iwo Banas – Can u please elaborate where do i need to add the styles
    @namespace mdgc “com.iwobanas.controls.dataGridClasses.*”;
    mdgc|DropDownFilterHeaderRenderer{
    filter-button-style-name: dataGridFilterButton;
    filter-button-active-style-name: dataGridFilterButtonActive;
    }
    to solve the filter icon related issue(when user enter soem thing in text input then icon should turn red.) in Flex 4.I am facing this issue without any solution.Can u please help me in this regard as soon as possible.

  5. This is a great bunch of code but I nevertheless have a question. Some users want to have the ability to save drag-and-dropped columns. I have tried to make a MDATAGRID using your components but composed of just bind variables. The idea is that, upon login, this would get loaded up from the server and then the datagrids get set correctly. It seems to be ok other than filterEditor=”{C1filterEditor2}” in the mxml. The compiler won’t let me get away with anything other than hardcoding the IFactory reference. Perhaps I am going about this all wrong….
    Any ideas?

  6. I want to use grouping functionality as well, as in advanced datagrid.
    Is the code available for that.

  7. @Phil
    model.messageGrid.filterFunction = filterGirdFunction;
    _model.messageGrid.refresh();

    private function filterGirdFunction(item:Object):Boolean
    {
    var val:Boolean = true;
    if(txtInput.text != “”)
    {
    if(item.columnndatafield.toLowerCase().indexOf(txtInput.text.toLowerCase())<0 )
    {
    val = false;
    }
    }

    return val;
    }

  9. There is an issue when you have defined the filterEditor for the datagridcolumn to “MultipleChoiceFilterEditor”.

    For example, assume you have the following in your filter editors (x denotes Selected):

    x Accounting
    Marketing
    Administration

    When you refresh your dataprovider and there is no Accounting on the list, the component throws an error:

    TypeError: Error #1009: Cannot access a property or method of a null object reference.
    at mx.managers::FocusManager/childHideHandler()
    at flash.events::EventDispatcher/dispatchEventFunction()
    at flash.events::EventDispatcher/dispatchEvent()
    at mx.core::UIComponent/dispatchEvent()
    at mx.core::UIComponent/setVisible()
    at mx.core::UIComponent/set visible()
    at mx.controls::Button/http://www.adobe.com/2006/flex/mx/internal::viewIconForPhase()
    at mx.controls::Button/http://www.adobe.com/2006/flex/mx/internal::getCurrentIcon()
    at mx.controls::Button/measure()
    at mx.controls::CheckBox/measure()

    Has anybody came across a solution for this error?

    I tried getting the latest from the source code build but the error is still there.

    I am quite stumped on where this error is actually originating.

  10. Hello good day!
    First I have to congratulate you for the beautiful work I’m using the “MDataGrid” with flex 4 and am having some problems in the design of my flex builder, when I put the “MDataGridColumn” in my actionscript, the area of ​​design is all white and nothing appears

    I’m using FlexBuilder 4.0 with eclipse

  11. @Iwo Banas
    I tried this code, but it does not seem to work when dynamically creating MDatagrid columns. Do I need to import or reference something?

    Thanks.

  12. @Iwo Banas
    This grid is really awsome. I have used it and it is working perfectly. I got a requirement tht i need to remove filters for some columns in your grid. How can i remove filters for some columns?

  14. If I remember correctly you should be able to simply use DataGridColumn instead of MDataGridColumn for columns where you don’t need filtering.

  16. Hi Iwo Banas,

    I was trying to modify the MDataGrid so that MultipleChoiceFilterEditor should automatically update filters for the filtered datagrid. e.g, if I select “chem” as subject the filter options in instructor columns should show only “chem” instructors.

    Could you please help me in this. I was trying to write 2 different itemrenderes for the 2 columns, but still couldnt get proper results.

    Thanks,
    Ashish

  19. Very Idea on how the filtering is happening.
    Is there a similar functionality that works in a similar fashion for the Spark datagrid.

  20. I have a Advanced datagrid which displays a HierarchicalData …can i use this component on that so that i can hightlight contents …

    my code is like
    /**************************/

    /******************?/

    but flex builder doesnt show dataprovider option with the MDataGrid component ..

    How can i solve the issue ??

  21. HTTPService id=”taskRequest” useProxy=”false” resultFormat=”e4x” result=”taskResultHandler(event)” url=”Task.xml” />

  22. Hi
    I am showing 25 records in datagrid.I am using pagination.but when I try to filter data it is filtering page wise(only on 25 records).But it should filter on whole data.

    Could you please help me in this?

    Thanks
    Govardhan

  23. Hey, great work! Is there a way to make the search box at the bottom like the instructor/title search filter? Hiding records that doesn’t contain the searchstring LIVE? Please let me know

  24. Hey is there a way to make the Main search like the one specific to column? Like hiding the records that doesnt contain the search string?

  25. Hii Everyone , This grid is excellent I am using it from 6 months on sdk 3.2 but now when I used it in sdk 4.1 , I am facing the problem that when I type some text in box for filtering the records records are being filtered but I am not able to see the text what I am typing even not the cursor .
    Plz help me regards this ..

  26. Hi

    grt work done by u thanks …. 🙂

    i want to know …. if i need to change the format of text in each column or lets say i want to have different renderer like button or linkbutton ….. where sud i do changes ?

  28. Good Morning,

    Any update on this component? There’s a few bugs that prevents the filter from working in Flex 4.6. Basically, the icons do not show up at all. Both trunk sources do not provide a fix so far.

    I guess what I am asking is if this component still supported or is abandoned?

  29. Hi,

    My grid contains filter section.But the requirement is if user selects any row in the grid then we need to keep the selection and the filter should function as it is.

    Datagrid contains radiobutton.

    Thanks in advance
    Srini

  30. Hi, When I change the data provider to Mdatagrid it does not show new data as per current filter. In fact it shows all data even I can see filter is enabled. Please can you advise?

    I have a requirement where data provider is constantly changing, adding new rows to existing data grid but filtering doesn’t work automatically when row is added.

  31. Hi Iwo!

    Absolutely amazing component! Very nicely done and very professional. I love your approach to Software Engineering. I have the same attitude as you.

    I had a couple of issues and I was hoping you could help out. I know you’re a busy man and that your time is valuable and that you don’t owe me anything but if you can manage to find the time, I’d really appreciate it.

    The first issue is that I’m getting the same problem as some other people here. The data is not appearing in the grid when loading the data for the dataprovider dynamically but I noticed that clicking on one of the filter icons or on the column header makes the data appear. It seems that the grid is not being graphically refreshed when data is being added to its data provider. It works with the default datagrid though.

    I tried calling updateList() on the MDataGrid component after adding data to its dataprovider as you recommended to someone else here but that didn’t help (well, actually, I had to write a wrapper function inside MDataGrid because updateList is protected).

    Also, I need to use the itemRendererFunction on some of my columns. This means that I need to use the Spark GridColumn component for them. I can’t just put the Spark GridColumns inside an MX DataGrid (coercion errors) so I tried changing your code so that it inherits from the Spark components instead but I get so many compilation errors. I’m not really sure how safe it is to correct some of them and I got stumped on line 61 of FilterEditorBase.as (attempting to call getStyle() on column object but it’s not a valid call for a Spark GridColumn).

    Like I said, any help would be very much appreciated.

  32. So, thankfully, I finally managed to sort out the update problem. Seems that I needed to set
    copyDataProvider to false

    I see now that you mentioned this Iwo in a comment posted on the 31st of January 2010 but I didn’t realise what you were replying to. I’m not deleting items from my dataProvider so I should be safe enough I guess.

    Now to see about converting the code to Flex 4 so that I can use an itemRendererFunction for some columns (or see about another solution to that problem).

  40. Hi,

    What if the grid has Hierarchial data instead of a plain grid?
    I tried using it but seems getting a error.

    Appreciate your help.

    -Hemu

Leave a Reply

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