apache-flexdatagridcheckboxflex4

Flex align checkbox in datagrid Flex


I use an item renderer to display a checkbox in my datagrid like;

<mx:DataGridColumn headerText="Visible" dataField="visibleInd" width="48" 
itemRenderer="mx.controls.CheckBox" 
rendererIsEditor="true" 
editorDataField="selected"
/>

And that works fine, but the checkbox is aligned left like;

alt text

How can I align it in the middle?

I have used;

            <mx:DataGridColumn headerText="Visible" dataField="visibleInd" width="48" 
                               editorDataField="selected"
                               >
            <mx:itemRenderer>
                <fx:Component>
                    <mx:Box width="100%" height="100%" 
                            horizontalAlign="center" verticalAlign="middle">
                        <mx:CheckBox selected="{data.visibleInd}" />
                    </mx:Box>
                </fx:Component>
            </mx:itemRenderer>

But in this case my code does align the checkbox in the middle, but does not save data in my dataprovider.

Am I missing something?


Solution

  • Instead of using <mx:Box />, use <mx:Canvas /> or <s:Group /> (in Flex 4).

    Also, set the horizontalCenter="0" on the checkbox.

    For example:

    <mx:itemRenderer>
        <mx:Component>
            <mx:Canvas width="100%" height="100%">
                <mx:CheckBox selected="{data.visibleInd}" horizontalCenter="0" />
            </mx:Canvas>
        </mx:Component>
    </mx:itemRenderer>