Skip to main content
Participant
May 12, 2011
Question

Spark DataGrid GridColumn width binding issue

  • May 12, 2011
  • 1 reply
  • 2265 views

I have an existing Flash Builder 4 project built with mostly Spark components, but using the mx:DataGrid. I just swapped them out for the s:Datagrid component. Above each grid I had s:TextInputs used for filtering. They were all set to width "{whateverColumn.width}". They bound perfectly to the width of each GridColumn underneath it. But since the change to the Spark DataGrid the binding to the GridColumn width stopped working. The TextInputs snap to the correct width only when a column is resized. Please advise on how to force the refresh of the internal property the width is bound to, or another property to bind to? Thanks

This topic has been closed for replies.

1 reply

August 3, 2011

Hi.  Just wanted to bump this, since I'm running into the same issue.  Here's a comment I posted at http://butterfliesandbugs.wordpress.com/2011/03/08/its-a-best-practice-to-size-a-spark-datagrids-columns-with-a-typicalitem/:

Hi. i’m trying to figure out the Spark DataGrid event lifecycle, and the lifecycle of the GridColumns. I have some items in a parent container that I want to size relative to the GridColumn widths. I’ve tried adding listeners to various events on the DataGrid, like UPDATE_COMPLETE, ADDED_TO_STAGE, etc., but it appears that the .width property of the grid columns is always NaN until you explicitly change the column’s width by dragging the header separator. The columns obviously have a width, because they’re being drawn on stage, but I can’t find a public property or method that exposes it. And since GridColumns aren’t even UiComponents, they don’t have a getExplicitOrMeasuredWidth method or anything. Any ideas?

August 3, 2011

For those looking into this, I found a solution.  Each column has a property called "grid" that refers back to the parent grid.  The grid itself has a getColumnWidth() method that takes the column index and returns the actual explicit or measured width. You'll need to check to make sure grid has been set on the column, but once it's valid, this method returns correctly.  In my case, I'm setting the width of an element called filterField, so I store the index of the column as it's instantiated (this is in a class that stores a GridColumn as "column") and get the width this way:

if (isNaN(column.width)) {

if (this.column.grid) {

var colWidth:Number = this.column.grid.getColumnWidth(this.index);

filterField.width = colWidth - 1;

}

} else {

filterField.width = column.width - 1;

}

Hope this saves someone the huge amount of time it took me to figure this out.

Participant
August 3, 2011

You're correct, the Grid getColumnWidth() method returns the actual column widths. The Grid class encapsulates all of the grid's geometry and DataGrid, GridColumn, GridEvent provide a grid property to simplify getting at it.

My apologies for the confusion about this.  The GridColumn width property should explain how to determine the column's actual width.   GridColumn layout widths are updated at Grid layout time, presently there isn't an explicit event that indicates when a particular column's acutal width has been updated.

There's more information about DataGrid on my blog - http://hansmuller-flex.blogspot.com/

- Hans