Friday, March 6, 2009

Filtering and Highlighting Lists and DataGrids

I've written a FilterBox control that filters the data inside List and DataGrid components, and another one that highlights items.

See the example below for filtering and highlighting a List. I've included a few extra item renderers for showing checkboxes, and for highlighting DataGrid columns.
(View source enabled)

There are some limitations, such as it only highlights the first occurrence of the text. And I probably could have used data binding instead of passing in a function to the TextHighlighter, but hey - it's a work in progress.

If you use the FilterBox control, you might notice that it depends on a ButtonBox component. This is my implementation of a CheckBoxList, which has the same basic functionality as a List, but maps each data item in the list to a CheckBox, and doesn't re-use item renderers the way Lists do. This way you don't have to have a selectedField property in your data. I've noticed that the ButtonBox control doesn't scale very well if you have more than a few hundred items in the list.

1 comment:

Anonymous said...

this is great dude..