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.
I’ve created a “flex-4″ branch and committed a couple of fixes at http://code.google.com/p/reusable-fx/source/browse/?r=flex-4. I haven’t released the binaries yet so if you want to test it you’ll have to checkout the sources.
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?
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.
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?
I want to use grouping functionality as well, as in advanced datagrid.
Is the code available for that.
@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;
}
@Phil
Yes
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.
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
@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.
@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?
@anne
Can u explain me what u did to remove filters for some columns?
If I remember correctly you should be able to simply use DataGridColumn instead of MDataGridColumn for columns where you don’t need filtering.
This is really great component. Thanks Iwo Banas !
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
One of the best example I have ever seen… Thanks a ton !!!
This is excellent. I was looking for searching and selected typed text..