Flex Datagrid Column Align for numbers

Question

I have a datagrid where I want to align certain columns in such a way that the text is center aligned(both headertext and data). When the data is numeric, I need to align in a way that it is right aligned, holding total column center align property. please see the pic.

format

You can create your custom ItemRenderer for you types. After that use itemRendererFunction where you can see type of data and return ItemRenderer for thar type. Also DataGridColumn has style textAlign and you can use it. — lexus.pp
@lexus.pp How can I set DataGridColumn style? I cant find setstyle method for the class. Also is it possible to specify different alignment for different column? — Saju

Morlek Morlek · Accepted Answer · 2013-08-13T11:32:42

Here is an example with different styles in different columns.

<s:ArrayList>
    <s:GridColumn id="dgFamilyRegisterLine" width="30"
                  labelFunction="{dgFamily.getRowNumber(dgFamily.dataProvider)}"
                  sortable="false">
                        <s:itemRenderer>
                            <fx:Component>
                                <s:DefaultGridItemRenderer color="0x888888"
                                                           fontStyle="italic"
                                                           textAlign="right"/>
                            </fx:Component>
                        </s:itemRenderer>
                    </s:GridColumn>
    <s:GridColumn dataField="code" headerText="code" minWidth="250"/>
    <s:GridColumn dataField="designation" headerText="designation" minWidth="250"/>                     
    <s:GridColumn dataField="isEnabled" headerText="isEnabled" minWidth="70">
        <s:itemRenderer>
          <fx:Component>    
            <s:GridItemRenderer>
              <s:layout>
                <s:HorizontalLayout horizontalAlign="center" verticalAlign="middle"/>
              </s:layout>
              <s:Image visible="{(data.isEnabled=='1')?true:false}"
                                             source="@Embed(source='assets/images/check.png')"/>    
            </s:GridItemRenderer>
          </fx:Component>
        </s:itemRenderer>
    </s:GridColumn>
 </s:ArrayList>

Flex Datagrid Column Align for numbers

1 Answers