Aligning the header text in a DataGrid column in Flex (redux)

In a previous example, “Aligning the header text in a DataGrid column in Flex”, we saw how you could set the text alignment on a Flex DataGrid control’s DataGridColumn by setting the headerStyleName and textAlign styles.

The following example shows a few more methods of aligning data and headers in a DataGrid and individual DataGrid columns by setting a combination of the headerStyleName and textAlign styles on the DataGrid and DataGridColumn instances.

Full code after the jump.

The following example aligns all text (headers and rows) in a DataGrid control by setting the textAlign style on the DataGrid control itself.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/10/12/aligning-the-header-text-in-a-datagrid-column-in-flex-redux/ -->
<mx:Application name="DataGrid_textAlign_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:XML id="itemsXML" source="data/items.xml" />

    <mx:DataGrid id="dataGrid"
            dataProvider="{itemsXML.item}"
            textAlign="right" />

</mx:Application>

View source is enabled in the following example.

The following example right aligns all DataGrid headers and leaves the rows left aligned (default) by setting the headerStyleName and textAlign styles.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/10/12/aligning-the-header-text-in-a-datagrid-column-in-flex-redux/ -->
<mx:Application name="DataGrid_textAlign_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        DataGrid {
            headerStyleName: dataGridHeaderStylez;
        }

        .dataGridHeaderStylez {
            fontWeight: bold;
            textAlign: right;
        }
    </mx:Style>

    <mx:XML id="itemsXML" source="data/items.xml" />

    <mx:DataGrid id="dataGrid"
            dataProvider="{itemsXML.item}" />

</mx:Application>

View source is enabled in the following example.

The following example right align’s an individual DataGridColumn’s header and data by setting the textAlign style on the DataGridColumn instance.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/10/12/aligning-the-header-text-in-a-datagrid-column-in-flex-redux/ -->
<mx:Application name="DataGrid_textAlign_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:XML id="itemsXML" source="data/items.xml" />

    <mx:DataGrid id="dataGrid"
            dataProvider="{itemsXML.item}">
        <mx:columns>
            <mx:DataGridColumn dataField="@colA" />
            <mx:DataGridColumn dataField="@colB" />
            <mx:DataGridColumn dataField="@colC"
                    textAlign="right" />
        </mx:columns>
    </mx:DataGrid>

</mx:Application>

View source is enabled in the following example.

The following example right aligns an individual DataGridColumn’s header and leaves the data left aligned (default) by setting the headerStyleName and textAlign styles on the DataGridColumn instance.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/10/12/aligning-the-header-text-in-a-datagrid-column-in-flex-redux/ -->
<mx:Application name="DataGrid_textAlign_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        .rightAlignDataGridCol {
            fontWeight: bold;
            textAlign: right;
        }
    </mx:Style>

    <mx:XML id="itemsXML" source="data/items.xml" />

    <mx:DataGrid id="dataGrid"
            dataProvider="{itemsXML.item}">
        <mx:columns>
            <mx:DataGridColumn dataField="@colA" />
            <mx:DataGridColumn dataField="@colB" />
            <mx:DataGridColumn dataField="@colC"
                    headerStyleName="rightAlignDataGridCol" />
        </mx:columns>
    </mx:DataGrid>

</mx:Application>

View source is enabled in the following example.

The following example center aligns an individual DataGridColumn’s header text and right aligns the data by setting the headerStyleName and textAlign styles.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/10/12/aligning-the-header-text-in-a-datagrid-column-in-flex-redux/ -->
<mx:Application name="DataGrid_textAlign_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        .centerAlignDataGridCol {
            fontWeight: bold;
            textAlign: center;
        }
    </mx:Style>

    <mx:XML id="itemsXML" source="data/items.xml" />

    <mx:DataGrid id="dataGrid"
            dataProvider="{itemsXML.item}">
        <mx:columns>
            <mx:DataGridColumn dataField="@colA" />
            <mx:DataGridColumn dataField="@colB" />
            <mx:DataGridColumn dataField="@colC"
                    headerStyleName="centerAlignDataGridCol"
                    textAlign="right" />
        </mx:columns>
    </mx:DataGrid>

</mx:Application>

View source is enabled in the following example.

Due to popular demand, here is the “same” example in a more ActionScript friendly format:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/10/12/aligning-the-header-text-in-a-datagrid-column-in-flex-redux/ -->
<mx:Application name="DataGrid_textAlign_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        initialize="init();">

    <mx:Script>
        <![CDATA[
            import mx.utils.ObjectUtil;
            import mx.controls.Alert;
            import mx.controls.DataGrid;
            import mx.controls.dataGridClasses.DataGridColumn;
            import mx.rpc.events.FaultEvent;
            import mx.rpc.events.ResultEvent;
            import mx.rpc.http.HTTPService;

            private var dataGrid:DataGrid;
            private var httpServ:HTTPService;

            private function init():void {
                var centerAlignBold:CSSStyleDeclaration;
                centerAlignBold = new CSSStyleDeclaration(".centerAlignDataGridCol");
                centerAlignBold.setStyle("textAlign", TextFormatAlign.CENTER);
                centerAlignBold.setStyle("fontWeight", "bold");

                var dataGridCol1:DataGridColumn = new DataGridColumn("@colA");
                var dataGridCol2:DataGridColumn = new DataGridColumn("@colB");
                var dataGridCol3:DataGridColumn = new DataGridColumn("@colC");
                dataGridCol3.setStyle("headerStyleName", "centerAlignDataGridCol");
                dataGridCol3.setStyle("textAlign", TextFormatAlign.RIGHT);

                var cols:Array = [];
                cols.push(dataGridCol1);
                cols.push(dataGridCol2);
                cols.push(dataGridCol3);

                dataGrid = new DataGrid();
                dataGrid.columns = cols;
                addChild(dataGrid);

                httpServ = new HTTPService();
                httpServ.url = "data/items.xml";
                httpServ.resultFormat = "e4x";
                httpServ.addEventListener(ResultEvent.RESULT, httpServ_result);
                httpServ.addEventListener(FaultEvent.FAULT, httpServ_fault);
                httpServ.send();
            }

            private function httpServ_result(evt:ResultEvent):void {
                dataGrid.dataProvider = XML(httpServ.lastResult).item;
            }

            private function httpServ_fault(evt:FaultEvent):void {
                Alert.show("Failed to load: " + evt.currentTarget.url, evt.fault.faultString);
            }
        ]]>
    </mx:Script>

</mx:Application>

View source is enabled in the following example.