Flex MX datagrid merge columns with a separator

Question

I have a data grid that has regular columns and merged columns. The columns which are merged, displays data multi-line with a line Separator.

I want it to be displayed like this Name/DOB( Name and below it DOB with a separator) in one cell as header. A line separator between Name and DOB.

The data will be placed under the header the same way(Name and DOB below with a line separator).

Name

DOB

-------------------------

John Doe

10 Sep 1990

--------------------

Jack Jill

9 Aug 1992

---------------------

and so on. How can I achieve this?

If I have to extend the data grid component, please explain how.

Answer 1

You have to use item renderers to achieve this, The column in which you have two rows will have to have item renderer.

For one example try to create something like that, but, your renderer will be like below. If this does not work, search for custom item renderer there are a lot of tutorials on that.

<mx:DataGridColumn headerText="Col 2" dataField="col2">
    <mx:itemRenderer>
        <fx:Component>
            <mx:VBox horizontalAlign="right">
                <mx:Label text = "{data.text}"/>
                <mx:Label text = "{data.dob}"/>
            </mx:Box>
        </fx:Component>
    </mx:itemRenderer>
</mx:DataGridColumn>