AS3 - Right alignment in DataGrid not working as I expected

Question

Right, so I have a DataGrid with two columns. In the left column, I want the text to be aligned to the right: more specifically, if the column is too small to show the entire text, I want it to contain the right-most contents.

I managed to align it by making a custom class extending CellRenderer and setting the DataGrid's cellRenderer property to the class, as specified in this article. However, this doesn't work exactly how I want it to. It does indeed align the text to the right, but if the column is too small for all the text to fit, it still only shows the left-most section of it.

Does anybody know how I can make it show the right-most part of the text instead?

Just so you know, this is in a pure AS3 AIR application in FlashDevelop, and my CellRenderer class is the same as the one in the article I linked to above (i.e. RightAlignCell).

Answer 1

Here was my original code of my CellRenderer:

package  
{
    import fl.controls.listClasses.CellRenderer;
    import fl.controls.listClasses.ICellRenderer;
    import flash.text.TextFormat;
    import flash.text.TextFormatAlign;

    public class RightAlignCell extends CellRenderer implements ICellRenderer
    {
        private var tf:TextFormat;

        public function RightAlignCell() 
        {
            tf = new TextFormat();
            tf.align = TextFormatAlign.RIGHT;
        }

        override protected function drawLayout():void
        {
            textField.setTextFormat(tf);
            super.drawLayout();
        }

    }

}

However, changing the value of textField.x had no effect. I figured this was because I was calling super.drawLayout() at the end of my overridden version, which apparently changed the value back to the default. If I called it at the start, changing the x worked (I'm using -50 here as a noticeable example):

        override protected function drawLayout():void
        {
            super.drawLayout();
            textField.setTextFormat(tf);
            textField.x = -50;
        }

However, if I tried to set the value to this.width - textField.width, as Gio suggested should give the desired result, it only increased the x by 5 pixels. I discovered that the problem was, again, super.drawLayout(). It appears that it was resizing the textField's width to fit inside the column, which is why my calculation didn't work. I tried to remove it the function, but that was a big mess since it handled a lot of code necessary for the column to display properly. So instead, I figured to make the textField resize itself automatically to its proper width, even when super.drawLayout() resized it, using the autoSize property:

        override protected function drawLayout():void
        {
            super.drawLayout();
            textField.setTextFormat(tf);
            textField.autoSize = TextFieldAutoSize.LEFT;
            textField.x = this.width - textField.width;
        }

Now it worked, although with a few hitches. These were minimal though, and were fixed by moving the lines defining text format and autosize to the constructor of the CellRenderer (which I realised I should have done in the first place anyway). In the end, my final, functional class was this:

package  
{
    import fl.controls.listClasses.CellRenderer;
    import fl.controls.listClasses.ICellRenderer;
    import flash.text.TextFormat;
    import flash.text.TextFormatAlign;
    import flash.text.TextFieldAutoSize;

    public class RightAlignCell extends CellRenderer implements ICellRenderer
    {
        private var tf:TextFormat;

        public function RightAlignCell() 
        {
            tf = new TextFormat();
            tf.align = TextFormatAlign.RIGHT;
            textField.setTextFormat(tf);
            textField.autoSize = TextFieldAutoSize.LEFT;
        }

        override protected function drawLayout():void
        {
            super.drawLayout();
            textField.x = this.width - textField.width - 5;
        }

    }

}

The subtraction of 5 pixels to textField.x is just a bit of positioning I did to make the text look better, instead of touching the border of the column.

Sorry for such a long post while the solution is simple, but I decided to explain it in-depth. Basically I just came up with the class above, which worked.