DataGrid Search with Highlighted Matches
Today's challenge: Give the user the ability to search a Datagrid and then simply highlight the matching rows in the Datagrid. The first problem was figuring out how to programmatically highlight specific rows in a datagrid, and after some googling I stumbled upon Mike Nimer's blog entry CustomRowColorDataGrid Component. He has basically extended the DataGrid to allow for a way to manipulate row appearance based on data, and he's taken it one step further than other examples by externalizing the function from the custom class. Very cool.
The second part is homegrown. I basically have a Hits Array and I use a cursor to search the DataProvider for matches. Any matched record is added to my Hits array. Then when the CustomRowColorDataGrid calls my rowColorFunction, it checks to see whether the item of the current row is contained within my Hits Array, and passes back the highlighted color.
Here's a link to the sample code. Right click the app to get the source!
14 comments:
this has come in very handy for my 3rd year project for creating a course management system for my university
my only question is:
is there a way to make the search non-case sensitive?
Change this line:
myCursor.current.lyric.indexOf(criteria.text)
to:
myCursor.current.lyric.toLowerCase().indexOf(criteria.text.toLowerCase())
thanks that solution works great!
I use DataGrid.selectedIndex to highlight the row. I have one problem though. The screen won't refresh to show the highlighted row if it's at the very bottom of the datagrid. I tried your code (add one line at bottom: DataGrid Search with highlighted Matched, use "DataGrid" as search String), same problem.
Do you have any idea on how to let the screen to refresh itself and show the row that is hightlighted if it's at the bottom of the list?
Any suggestion would be appreciated!
Stacy
vic i second the previous post....how can i show a highlighted match if tis at the bottom fo a very large datagrid. is there a way to implement a filter function to this component so that only the higlighted matches are displayed? I've come accross this example http://udayms.com/flex/cgrid/UseCustomGrid.html but its proving to be a lot more difficult to implement because it does not extend the DataGrid
Thanx a lot, very helpfull :D
Thanx a lot, very very helpfull :D
Thanks!
your article is great!!really!!i have tried out some examples of search function and implement them in my code.i encounter some problem.could you help??when i correct one error ,another error would come out.i'm getting frustrated with myself..i want to learn more.i hope you can help me...could you help to correct where i'm wrong?where can i post the code so you can take a look at it?any minor help would be really appreciated...thanks a lot for your effort.
just send your code snippet or the flex project (minus the bin folder) to my email as posted here, and I'll have one of our devs take a look at it.
i can't get your email.my laptop have problems accessing mic.outlook.can you posted your emaial here.thanks
my email is victor [at] crazedcoders.com . I don't have the energy to do support via this blog comment system.
Thanks a lot, works great.
Tnx, dude, very helpfull!
Post a Comment