I am sure many of you would have tried dropping a ComboBox as a headerRenderer to a DataGrid. Well, if you try to directly drop in a ComboBox you will get an RTE and the ComboBox just doesn’t work! I got this request from one of the flex users here that they need to drop a ComboBox on a datagridcolumn to provide a UI for filtering the data in the datagrid.

After looking at the code for a while, I figured out that the set data method of the combobox checks if it is dropped in as an itemRenderer and what’s more, it sets the data irrespective of whether the value recieved in the set data is a datagrid column or not. In the case of dropping the ComboBox, the data setter sets the data to the DataGridColumn and when the program progresses it throws an RTE which says it couldnt find the property name on the headerRenderer instance.

The solution:

I subclassed the ComboBox control to make MyComboBox and wrote an override for the data Setter. I just added the following type check before the data setter in the super is called

if(value is DataGridColumn)
{
//do not call super; that is it!!
}
else
{
super.data = value
}

Thats pretty much it! The ComboBox will now correctly display in the header. I have written a simple example that has a ComboBox on the Datagrid column header which can be used to filter data. Note: I have turned off sortable columns and draggable columns in this example.

Disclaimer: This sample contains a small example of the concept, the application in itself has not been tested for bugs. People copy pasting the whole code and urged to exercise  Download Source