Mirroring DataGrid controls

You can use mirroring with a DataGrid control by setting the layoutDirection property on the application. Like most controls, the DataGrid control inherits this value. Setting the layout direction to RTL causes the columns to be arranged from right to left (column 0 is the right-most). This also aligns the sort arrows to the left of the header text. If the DataGrid is editable and the user clicks on a cell, the focus starts on the right side of the grid.

If you use an RTL character set such as Hebrew or Arabic in the cells of a DataGrid control, you must set the "Use Flash Text Engine in MX components" check box in Flash Builder. Otherwise, the characters will not render correctly because the TextField control does not support bidirectionality.

To align the text in the cells to the right, reverse the direction of the header text, and reverse the text in the individual cells of a DataGrid, you must also set the direction style property to "rtl". You can set this on a parent container or on the DataGrid itself.

The following example sets both the layoutDirection and direction properties to "rtl" so that the entire Spark DataGrid is mirrored:
<?xml version="1.0" encoding="utf-8"?>
<!-- mirroring\MirroredDataGrid.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
   xmlns:s="library://ns.adobe.com/flex/spark" 
   xmlns:mx="library://ns.adobe.com/flex/mx"
   width="600" height="400"
   layoutDirection="rtl" direction="rtl">

    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            
            [Bindable]
            private var dp:ArrayCollection = new ArrayCollection([ 
                {Artist:'Train', Album:'Drops of Jupiter', Price:13.99}, 
                {Artist:'Charred Walls of the Damned', Album:'Ghost Town', Price:8.99}, 
                {Artist:'Bleading Deacons', Album:'Rule the Night', Price:11.99}, 
                {Artist:'Three Stooges', Album:'Greatest Hits', Price:9.99} ]); 
        ]]>
    </fx:Script>    
     
    <s:DataGrid id="myGrid" dataProvider="{dp}"
        width="350" height="150"/>  
</s:Application>

The executing SWF file for the previous example is shown below: