Flex : How to right align cells in s:DataGrid?

Question

I have an s:DataGrid with 3 columns. I'd like to right align the text in the last two columns but can't find a way to get it working. I've tried creating a custom renderer and setting the textAlign to right, but it doesn't work.

Here's my custom renderer:

<?xml version="1.0" encoding="utf-8"?>

<fx:Script>
    <![CDATA[
    ]]>
</fx:Script>

<s:Label id="lblData" top="9" left="7" text="{data.outgoingCount}" fontWeight="bold" textAlign="right"/>

I would really like to know how to right align cells in the grid. Thanks for anyone who can help.

score 2 · Accepted Answer · answered Jul 08 '12 at 20:33

If you only need to show text, take a look at the DefaultGridItemRenderer class. If you don't specify an item renderer, this is what the Spark DataGrid will use.

DefaultGridItemRenderer has a textAlign style just like the Label does.

It's not readily apparent why your custom renderer is not working.

score 1 · Answer 2 · answered Jul 15 '13 at 11:15

The trick with right alignment using itemRenderers is to ensure that the itemRenderer either uses up the full width of the containing column OR is anchored to the right hand side of the grid column. Otherwise, the text in the label right aligns to an itemRenderer like a label that is not on the right hand side of the grid.

So make sure that the component doing the item rendering has a width="100%" or has right=something.

Here is an example that anchors to the right side of the grid column.

<s:DataGrid>
    <s:columns>
        <s:ArrayList>
            <s:GridColumn dataField="Artist"  width="100"/>
            <s:GridColumn dataField="Price"  width="100">
                <s:itemRenderer>
                    <fx:Component>
                        <s:GridItemRenderer>
                            <s:Label id="labelDisplay" textAlign="right" right="3" height="100%" verticalAlign="middle"/>
                        </s:GridItemRenderer>
                    </fx:Component>
                </s:itemRenderer>
            </s:GridColumn>
            <s:GridColumn dataField="Album"/>
        </s:ArrayList>
    </s:columns>
    <s:dataProvider>
        <s:ArrayList>
            <fx:Object>
                <fx:Artist>Pavement</fx:Artist>
                <fx:Price>11.99</fx:Price>
                <fx:Album>Slanted and Enchanted</fx:Album>
            </fx:Object>
            <fx:Object>
                <fx:Price>11.99</fx:Price>
                <fx:Artist>Pavement</fx:Artist>
                <fx:Album>Brighten the Corners</fx:Album>
            </fx:Object>
        </s:ArrayList>
    </s:dataProvider>
</s:DataGrid>

score 0 · Answer 3 · edited May 23 '17 at 12:28

Acknowledgments: I owe a lot to many posts in STACKOVERFLOW for this Esp. Number formatting in java to use Lakh format instead of million format

In new Flex AIR application 1 good innovation I did RIGHT ALIGN + Indian comma separation

This is done by custom item rendering; need a lot of search and code effort Adapted from Java but Java, C# & AS3 so similar it is a cakewalk porting

Outside of India nobody likes lakhs and crores; others happy with million billion BUT we Indians think lakhs and dream crores; and find million(10 lakh) thora confushingh

Enroute I also did RIGHT ALIGN a very common need

Flex Markup

<s:GridColumn id="dmbtr" headerText="Amt (INR)" dataField="dmbtr" >
  <s:itemRenderer>
    <fx:Component>
      <s:GridItemRenderer>
        <s:Label id="MyText" top="9" left="7" alpha="1"
                 text="{leftPad(data.dmbtr,10)}"
                 fontFamily="Lucida Console" textAlign="right"/>
      </s:GridItemRenderer>
    </fx:Component>
  </s:itemRenderer>
</s:GridColumn>

AS3 Function

public function leftPad(inp:Number,size:int):String {

  var lstr:String=Math.round(inp).toString();

// LAKHS CRORES Indian Style

  var pat3:RegExp = /(\d+)(\d{3})$/;
  lstr = lstr.replace(pat3, "$1,$2");

  var pat2:RegExp = /(\d+)(\d{2},.+)/;

  var pat1:RegExp = /\d{3,},.+/;

  while(lstr.match(pat1)) 
    lstr = lstr.replace(pat2, "$1,$2");

// RIGHT ALIGN part

  var strLen:int = lstr.length;
  var padLen:int = size - strLen;

  if (padLen <= 0) 
    return lstr;  

  var myspaces:String="                    ";  // 20 OK

  return myspaces.substring(0,padLen)+lstr;

}

The trick is to left pad and use fixed width font

My requirement was nearest rupee

If you need decimals(paise for INR) use toFixed method of Number and change pat3 as
var pat3:RegExp = /(\d+)(\d{3}.*)$/;

The right align part is after the Indian commas

Destroyica · Answer 4 · 2014-10-11T13:35:31.290

The best and simple way to do that:

<s:DataGrid>  
...  
    <s:columns>  
        <s:ArrayList>  
            <s:GridColumn id="col3" dataField="price" headerText="Price">
                <s:itemRenderer>
                    <fx:Component>
                        <s:DefaultGridItemRenderer textAlign="center" />
                    </fx:Component>
                </s:itemRenderer>
            </s:GridColumn>
            ...
        </s:ArrayList>
    </s:columns>
...
</s:DataGrid>

Source: https://forums.adobe.com/thread/863955?tstart=0

Flex : How to right align cells in s:DataGrid?

4 Answers4