Although standard Flex 3 DataGrid implements findString() function it is not really usable. Searching only the first column or the column with sorting enabled is definitely not intuitive and skipping to the next match on every keystroke is confusing. Furthermore calling to findString() changes selected index without highlighting matching text so in DataGrid with many columns it may be hard to figure out where the matching text is located.
Given above I decided to create new more flexible and reusable searching mechanism for DataGrid. As I was working on it I realized that other components (e.g. TextArea) may also support searching. That’s why I decided to create ISearchable interface to be implemented by every component supporting searching.
I also decided that searching should support standard wildcards like “*” or “?” so I created WlidcardUtils class to convert wildcards to regular expressions which are internally used by my searching mechanism. I know that regular expressions aren’t very fast so maybe one day I will write my own mechanism for matching wildcards but for now RegExp’s are enough.
To support searched text to be highlighted I have implemented BoldSearchItemRenderer which can be used instead of standard DataGridItemRenderer.
Finally I have extended DataGrid to implement ISearchable interface. I haven’t named it SearchableDataGrid since I am going to add many other features later and as AdvancedDataGrid name was in use too I decided to leave the name DataGrid changing only the package.
This example demonstrates live searching DataGrid with about 400 rows.
View source is enabled, you can download zipped sources from here.
Hey Iwo
TypeError: Error #1009: Nie można uzyskać dostępu do właściwości lub metody dla odniesienia do obiektu null.
at com.iwobanas.controls::DataGrid/matchItem()
at com.iwobanas.controls::DataGrid/findItem()
at com.iwobanas.controls::DataGrid/findPrevious()
at SearchBox/__previousButton_click()
Would be nice if it would walk through the list even if there’s nothing in the search box 🙂
Best regards,
Michał
THX for reporting a bug, I’ll fix it in the “next release” 🙂
Hey Iwo,
I’ve downloaded the source, but I keep getting this error when I build:
1046:type was not found or not a compile time constant: DataGrid
Do you have any idea how to resolve that issue. I’ve been searching forums, but haven’t figured out how to fix it.
Hi Ron,
This error means that you don’t have com.iwobanas.controls.DataGrid class in your source path. To use sources from this post save zipped sources and than use Flex Builder “File” -> “Import” -> “Flex Project…” wizard to import the archive as project.
I have renamed searchable DataGrid to MDataGrid which is available at http://code.google.com/p/reusable-fx/. Download binary release and extract ReusableFx.swc to libs directory of your project. You can have a look at other posts on this blog to find how to use MDataGrid.
Hope this will be of some help.
Hi Iwo, I had implemented your filtering function. Found it very useful. Thanka a lot. But in the search Function given at the bottom of the datagrid, I want only the search items to be displayed and not just highlighted. How can I achieve this?
Hi Angeline,
For now such “global filtering” is not supported. You could implement it by extending MDataGrid code and adding another filter function to the dataProvider.
Let me know if you would like me to implement it as a freelance contract.
Cheers,
Iwo
I’m badly in need of that functionality for my application. Could you guide me in how to do that? I’m not that a good coder, but I’ll try my best to achieve that functionality with your guidance 🙂
Hi Iwo,
that’s great! good work, thanks for your help.
Thanks a lot. Quite innovative solution and nice looking.
hi Iwo, im trying to implement your searchable Data Grid in flex 4, but it wont let me assign the actual datagrid to target without this it does not search the dg, any thoughts on how i can do this in flex 4?
Many Thanks for this Source code, it helps me alot