Question

I am trying to find a way to Scale (either font or scaleX&Y) a DataGrid (with requestedMinRowCount = requestedMaxRowCount = requestedRowCount = dataProviderLength), so that it would Always show all the Rows (so no scrollers).

A Solution I came up with for Scaling is:

protected function thisDatagrid_resizeHandler(event:ResizeEvent):void
{
   if (event.oldWidth < this.width) {
     this.setStyle('fontSize', this.getStyle('fontSize') + 0.5);
   } else if (event.oldWidth > this.width) {
      this.setStyle('fontSize', this.getStyle('fontSize') - 0.5);
   }
   this.minWidth = this.measuredMinWidth;
}

While the code above actually does resize the text (hence the cell, column and grid) on Resize, the problem I am getting is when the rescale happens vertically.

For the requestedRowCount to work, there should not be a fixed height set on the Datagrid.
So I am wondering what is the way to get the grid to constantly show all it’s rows & columns as it scales (even if resized vertically)?

Another Option would be overriding updateDisplayList, though not straight forward for resizing.

override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {

     //super.updateDisplayList(unscaledWidth, unscaledHeight);              
     trace('oldWidth: ' + oldWidth + '  | unscaledWidth: ' + unscaledWidth + '  | parentWidth: ' + this.parent.width);
     trace('oldHeight: ' + oldHeight + '  | unscaledHeight: ' + unscaledHeight + '  | parentHeight: ' + this.parent.height);
     trace('Potential ScaleX: ' + (unscaledWidth - oldWidth)/unscaledWidth);
     trace('Potential ScaleY: ' + (unscaledHeight - oldHeight)/unscaledHeight);
     trace('----------------------------------------------------');
     /* scaleX = (unscaledWidth - oldWidth)/unscaledWidth;
     scaleY = (unscaledHeight - oldHeight)/unscaledHeight; */

     //super.updateDisplayList(unscaledWidth, unscaledHeight);
}

The problem with this if I uncomment scaleX & scaleY, it’ll loop forever…

Answer 1

The best (and most performant way is to use the layout of a group where the Datagrids would be located, and apply a layout like the one below:

ex: ScaleOneLayout.as

import mx.core.UIComponent;

import spark.layouts.BasicLayout;

public class ScaleOneLayout extends BasicLayout
{
    public function ScaleOneLayout()
    {
        super();
    }

    override public function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
   {
        var child:UIComponent;
        child = target.getElementAt(0) as UIComponent;
        child.setLayoutBoundsSize(child.getPreferredBoundsWidth(), child.getPreferredBoundsHeight());
        child.scaleX = unscaledWidth / child.width;
        child.scaleY = unscaledHeight / child.height;
    }
}