Searchable Grid Widget

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 –

  1. Creating the SearchGrid custom control.
  2. 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 .


14 Responses to Searchable Grid Widget

  1. Pingback: Flexed » YIPPEEEEEE!!!

  2. Josh says:

    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!

  3. udayms says:

    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. πŸ˜€

  4. jorge says:

    can this be used for flex 1.5 as well?


  5. Pingback: CustomGrid v1.0 (or SearchGrid v2.0) « Flexed

  6. alex says:


  7. hsTed says:

    nice component

  8. Ganesh says:

    Cool, Nice UI component work.
    Is your source free to use.


  9. quineto says:

    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?


  10. Norberto says:

    Very good, but the link is broken…

  11. I am Glad i came across this web site.Added to my bookmark!

  12. me says:

    What are some good wordpress themes/plugins that allow you to manipulate design?

  13. You probably already heard some horror stories about online shopping where shoppers
    got the raw end of the deal. Having mandatory classes in school has great
    benefits: CHOICES often back us up against unexpected
    walls, or take us down paths we will regret. Normal 0 false false false
    EN-US X-NONE X-NONE Microsoft – Internet – Explorer4 /* Style Definitions */ table.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: