Flex 4.6 binding to Spark GridColumn width

Question

I know Flex is full of holes, and it needs a lot of hacks to get it to work right, but I think I'm on the right path to getting it right. I will describe the problem and the solution I'm trying to implement, I hope you can point me in the right path.

What I'm trying to do is binding the width of a Spark DataGrid column to the width of a Spark Label, here is the first hole: GridColumn has a binding property "width" but it's not ready after the object creation is complete and it's only published after user interaction. So I came up with the first hack: A function that extract the column width from the DataGrid itself and it's binded to the events that are triggered when the columns are created or their sizes changed, and it works:

[Bindable(event="creationComplete")]
[Bindable(event="columnStretch")]
[Bindable(event="propertyChange")]
public function columnWidth(grid:DataGrid, column:GridColumn):int {
    if(isNaN(column.width)){
        if(column.grid){
            return column.grid.getColumnWidth(grid.columns.getItemIndex(column));
        }
    }
    return column.width;
}

it works to retrive the width at creation but it doesn't work for when I set the width of the column with the cursor, as any bindable property works, so the thing is like this: If I set the width of the label as such: the width is changed after user interaction but not after the grid's creation complete. If I set the width with the width is changed after the grid is complete but it won't react to user interaction...

Any help?

RIAstar RIAstar · Accepted Answer · 2013-03-09T22:24:33

It looks like I ran into the same issue a while ago. And fixed it: the following approach worked fine for me. Assume you have a function that resizes your label based on a column's width:

protected function layoutTextInputs():void {
    var numCols:int = dataGrid.columns.length;
    var w:Number = 0;

    for (var i:int=1; i<numCols; i++) {
        var header:Rectangle = dataGrid.columnHeaderGroup.getHeaderBounds(i);
        var textInput:IVisualElement = textInputs.getElementAt(i - 1);

        textInput.left = header.x;
        textInput.width = header.width;
    }
}

In this example textInputs is a Group containing a TextInput for each column, that is positioned exactly above that column and is equally wide.

Now you want to call this function every time the user resizes a column, so you do this:

dataGrid.columnHeaderGroup.addEventListener(
    GridEvent.SEPARATOR_MOUSE_DRAG, onHeaderResize);
dataGrid.columnHeaderGroup.addEventListener(
    GridEvent.SEPARATOR_MOUSE_UP, onHeaderResize);

private function onHeaderResize(event:GridEvent):void {
    layoutTextInputs();
}

But unfortunately this does not execute the method on initialization, nor when the screen is redrawn in any way that changes the column's widths in any other way than through user interaction. Luckily this is easily fixed:

override protected function updateDisplayList(
    unscaledWidth:Number, unscaledHeight:Number):void 
{
    super.updateDisplayList(unscaledWidth, unscaledHeight);
    layoutTextInputs();
}

Edit: a note on the 'holes' in Flex.

GridColumn is not a visual component. It is a presentation model that instructs the grid layout how to render its (actual) columns. So you must interpret its width property as such an instruction and not as an actual value of the column's width.
By default a column's width is determined based on its contents and the available space. The width property instructs the grid layout to use a custom amount of pixels instead.

Flex 4.6 binding to Spark GridColumn width

2 Answers