Question

Tried

col.setStyle('percentWidth',20) //doesn't work

col.setStyle('percentWidth',0.2)//doesn't work

&&

col.percentWidth //doesnt compile

where col is one of the columns in a datagrid

Thanks.

Answer 1

Use the following extended datagrid:

package {
import mx.controls.DataGrid;
import mx.events.DataGridEvent;

public class ExDataGrid extends DataGrid {

    //--------------------------------------
    //   Constructor 
    //--------------------------------------

    public function ExDataGrid() {
        super();
        addEventListener(DataGridEvent.COLUMN_STRETCH, onColumnStretch);
    }

    //------------------------------------------------------------------------------
    //   Properties 
    //------------------------------------------------------------------------------

    //--------------------------------------
    //   Private 
    //--------------------------------------

    /**
     * @private
     * Keeps track of whether the columns have been manually adjusted or not. If they
     * have, then do not apply the columnWidths that have been specified.
     */
    private var _columnsAdjusted : Boolean = false;

    /**
     * @private
     * Storage for the columnWidths property.
     */
    private var _columnWidths : Array = new Array();

    /**
     * @private
     */
    private var _columnWidthsChanged : Boolean = false;

    /**
     * @private
     * Stores the explicit width portions of the column widths.
     */
    private var _explicitColWidths : Object;

    /**
     * @private
     * Stores the percentage width portions of the column widths.
     */
    private var _percentColWidths : Object;

    //--------------------------------------
    //   Getters / Setters 
    //--------------------------------------

    public function get columnWidths() : Array {
        return _columnWidths;
    }

    /**
     * Sets the widths of each of the columns. The widths can either be percentages or
     * explicit widths. For each column in the DataGrid, there should be a column width
     * value. The column widths should be expressed as strings.
     *
     * If there are 4 columns and we want the 1st column to be 40% width, the 2nd column
     * to be 60% width, the 3rd column to be a fixed width of 200, and the 4th column to
     * be a fixed width of 300. Then we would set the columnWidths property to be:
     * ['40%', '60%', 200, 300]
     */
    public function set columnWidths(values : Array) : void {
        if (_columnWidths != values) {
            _columnWidths = values;
            _columnWidthsChanged = true;

            invalidateProperties();
            invalidateDisplayList();
        }
    }

    //------------------------------------------------------------------------------
    //   Functions  
    //------------------------------------------------------------------------------

    //--------------------------------------
    //   Protected 
    //--------------------------------------

    /**
     * @private
     */
    override protected function commitProperties() : void {
        super.commitProperties();

        if (_columnWidthsChanged) {
            splitPercentWidths(columnWidths);
            _columnWidthsChanged = false;
        }
    }

    /**
     * @private
     * Sizes each of the columns in the DataGrid based on the columnWidths property,
     * unless the user has manually resized the columns, then the column widths will
     * not be adjusted.
     */
    override protected function updateDisplayList(unscaledWidth : Number, unscaledHeight : Number) : void {
        // Determine how much width is left over for percentage calculations after the fixed
        // widths are allocated.
        var leftoverWidth : Number = unscaledWidth;

        for each (var explicitColWidth : Number in _explicitColWidths) {
            leftoverWidth -= explicitColWidth;
        }

        // Manually adjust the column width before doing super.updateDisplayList. This way when 
        // super.updateDisplayList is called, it can perform any minor adjustments to the columns, 
        // but the column widths will still be pretty consistant with the specified widths.
        if (columns && columnWidths && !_columnsAdjusted && columns.length == columnWidths.length) {
            for (var i : int = 0; i < columnWidths.length; i++) {
                var w : Number = 0;

                if (_explicitColWidths[i]) {
                    w = _explicitColWidths[i];
                }
                else {
                    w = leftoverWidth * (_percentColWidths[i] / 100);
                }

                // Adjust the column's width. After digging through the DataGridColumn, I found 
                // 3 different properties that need to be set to override the default column width 
                // calculations performed by DataGrid and DataGridColumn. They are _width (changed 
                // in the setWidth method), explicitWidth, and preferredWidth.
                columns[i].setWidth(w);
                columns[i].explicitWidth = w;
                columns[i].preferredWidth = w;
            }
        }

        super.updateDisplayList(unscaledWidth, unscaledHeight);
    }

    //--------------------------------------
    //   Private 
    //--------------------------------------

    /**
     * @private
     */
    private function onColumnStretch(event : DataGridEvent) : void {
        _columnsAdjusted = true;
    }

    /**
     * Called from the <code>commitProperties()</code> method to break up the columnWidths
     * into percentage based widths and explicit widths.
     *
     * When we calculate the percentage widths in <code>updateDisplayList()</code> we need
     * to know the remaining available width after explicit widths are subtracted.
     */
    private function splitPercentWidths(values : Array) : void {
        if (columns && columnWidths && columnWidths.length > 0) {
            _percentColWidths = new Object();
            _explicitColWidths = new Object();

            for (var i : uint = 0; i < columnWidths.length; i++) {
                var columnWidth : String = columnWidths[i] + "";

                // If columnWidth contains a '%' then it is a percentage width, otherwise
                // it is an explicit width.
                if (columnWidth.indexOf("%") == -1) {
                    _explicitColWidths[i] = Number(columnWidth);
                }
                else {
                    _percentColWidths[i] = Number(columnWidth.substr(0, columnWidth.length - 1));
                }
            }
        }
    }
}
}

Declare all column widths as at array assigned to ‘columnWidths’ with the following syntax:

 columnWidths = ['70%','30%','100'];

Widths without a % sign are treated normally.