Update: 15 August 2007 - CustomGrid v1.2 released
This is a small script which creates a searchable grid. This script is too basic and is for newbies (like myself
). Check out the demo and source here. This scriptlet should give an idea about -
- Creating the SearchGrid custom control.
- Using the SearchGrid control.
In this script, we have two ArrayCollections. One for the column details and another for the data. This way, we are abstracting the columns info and data from the custom widget. The widget is basically a datagrid with a textfield on top. When the user types into the textfield, the grid filters to data which contain the typed text.
To try out the demo, try typing in words from the data in the grid andyou will find the grid filtering. The search logic in this script is from the ThoughtFactory MXNA Viewer. The MXNA viewer has many more features. All I have done here is pull out the logic for the search, modify it a little bit and create a widget that can be reused. Enjoy!
*Special thnx to Ajit for helping me optimize the code.
The Latest version of Search Grid is here .



[...] The search grid has been included by Ted Patrick (Flex Evangelist, Adobe Systems) in his list of text filtering examples. There is a very useful UI pattern emerging for RIA applications in terms of filtering results. Basically as a user enters data and results are filtered in real time. I have seen many cases of this recently in several applications and thought highlighting a few would be useful. [...]
This is an excellent component. If you’re looking to revisit it at some point, I do have one suggestion. In addition to filtering out the rows that don’t match the typed in text, it would also be nice to highlight the matching text string in each row, so the user knows what column is providing the string that’s keeping that row visible. No clue how to do it, but I thought I’d throw it out as a challenge.
Very nice work though. Thanks!
Hi Josh,
Yepp. You are right. In fact that was the route in which I started first, then when I couldnt figure out an effective/fast way to do it, I took the easy route.
Though, I plan to add more bells and whistles to the widget soon
. As you see, I am a newbie… just trying to figure my way around with this beautiful language.
can this be used for flex 1.5 as well?
thanks
[...] Last June , when I was just getting my feet wet with Actionscript, I was trying to build a grid component for the project I am working on and the output of that was posted as SearchGrid v1.0 and in July Ted Patrick included it in his blog post about text Based Filtering component. [...]
cool
nice component
Cool, Nice UI component work.
Is your source free to use.
Thanks
GB
Hello Uday,
seems that u have lots of questions must be that this is a great module, so here is one more question for when you have some time , I appreciate it.
if I want to add a horizontal scroll bar, so the grid can haveenough space for colums and it´s headers . Should I modify the CSS or is at the UseCGrid.mxml layout, or somewhere in the code?
thanks