How to create a table like structure in Flex with rows as text inputs or can I have input fields in the datagrid column?

Question

I want to create a table like structure in Flex, with labels as header. The rows entries might be a check box or a text input box,Like give below.

select | task name | task id | task type

(check box) | (text box) | (text box) | (text box)

(check box) | (text box) | (text box) | (text box)

Or can I create a data grid and have text input boxes or check boxes as column values?

Answer 1

Yes you can. Set the DataGridColumn's editable and rendererIsEditor properties to true to get TextInputs in the cells. Use custom item renderer to get check boxes.

<mx:XMLListCollection id="listCol" source="{xmlList}"/>
<mx:XMLList id="xmlList" xmlns="">
    <item>
        <text>Text 1</text>
        <flag>true</flag>
    </item>
    <item>
        <text>Text 2</text>
        <flag>false</flag>
    </item>
</mx:XMLList>
<mx:DataGrid dataProvider="{listCol}">
    <mx:columns>
        <mx:DataGridColumn editable="true" rendererIsEditor="true" 
            editorDataField="selected">
            <mx:itemRenderer>
                <mx:Component>
                    <mx:CheckBox selected="{data.flag == 'true'}"/>
                </mx:Component>
            </mx:itemRenderer>
        </mx:DataGridColumn>
        <mx:DataGridColumn editable="true" rendererIsEditor="true" 
            dataField="text"/>
    </mx:columns>
</mx:DataGrid>