0

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).

puggsoy
  • 1,270
  • 1
  • 11
  • 34
  • Did you try changing the `x` property of the `textField`? – Gio Jan 05 '13 at 22:55
  • Just to be clear it's working as expected. Right align doesn't mean "show the right most contents". – Sunil D. Jan 06 '13 at 01:45
  • @Gio: Yes, unfortunately that didn't appear to have any effect. @SunilD: I guess your right, but what I meant was it isn't working how I expected. In programs like Excel, right alignment does this, so I assumed it'd be the same for Flash's `DataGrid`. Anyway fixed the title to reflect that. – puggsoy Jan 06 '13 at 14:49
  • I'm not at my computer ATM, when I get there I'll give it a shot. I think setting the right alignment and setting the `x` property of textField to `this.width - textField.width` will do what you want. – Gio Jan 06 '13 at 14:55
  • @Gio: It isn't working for me, but feel free to give it a try. If it works there must be something weird with my code. EDIT: Aha, found the problem. It appears that the `textField`'s width changes to fit inside the column, which means that finding the difference between the two results in +5. I removed `super.drawLayout()` from the overwritten `drawLayout` function in my `CellRenderer`, and it appears to remove the specific problem, but many, many more appear. – puggsoy Jan 06 '13 at 17:53
  • OK, I've found a solution, so I'm going to answer my question. This is the second time in a row it's happened: I have a question, nobody has an answer, but after discussing it in the comments I find my own solution. Thanks a lot guys! – puggsoy Jan 06 '13 at 18:15

1 Answers1

2

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.

puggsoy
  • 1,270
  • 1
  • 11
  • 34