Recent Posts

Get in touch

Pages

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

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.

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?

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?

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.

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

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

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.

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

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

So, thankfully, I finally managed to sort out the update problem. Seems that I needed to setcopyDataProvider 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).