Automatically resize width of DataGridCoulmn/AdvancedDataGridColumn to fit content

Question

I want that the DataGridColumn or AdvancedDataGridColumn would automatically resize it's width so as to fit the content within..

I'm new to flex. I want to implement something like HTML tables.

The Data Rendered is simple Text. Some Rows have little longer Text, in that case I would like to automatically extend the width of DataGridColumn.

Any help to solve this.

Thanks in advance

Answer 1

You've hit upon one of the biggest problems of the DataGrid and AdvancedDataGrid. I absolutely hate how hard it is to get cell content to appear comfortably. For reasons not immediately apparent, narrow field values will appear in very wide cells while wide content and headers will get scrunched.

This is especially true for the first and last columns for some reason.

The only solution I have found is to set the minWidth property on columns, and I have to go through the data first to find the widest outliers in those columns and make sure they fit comfortably. Another solution that helps is to have dummy columns on the left and right that are given widths and minWidths and maxWidths of some very small size, say 5, which seems to allow the real columns in the middle to "breathe" a little better.

<mx:columns>
  <mx:DataGridColumn id="leftDummy" width="5" minWidth="5" maxWidth="5"/>
  <!-- Your "real" columns here, with minWidth assignments -->
  <mx:DataGridColumn id="rightDummy" width="5" minWidth="5" maxWidth="5"/>
</mxcolumns>

Be careful, though. If you set a width on a column it gets interpreted not as a literal value or an actual percentage but as some kind of half-assed proportion. I can only assume that the column-sizing procedures get tired of calculating and settle on some kind of "reasonable" interpretation of column width — which, of course, turns out to be utterly unreasonable much of the time.

At this moment I am so frustrated I am considering going with a 3rd party product, ElfGrid, which solves these issues and more. Look at the documentation, especially the ElfColumnUtils, which have some very handy methods for dealing with these issues. It's also quite fast in the testing I've done.

Answer 2

Here's how I do it, and it works quite well...

Create a bindable variable and give it a starting number (let's say 100), ex:

[Bindable] private var colWidth:int = 100;

Use data binding to size the columns, ex:

mx:DataGridColumn width="{colWidth}"

Add a resize event handler to your data grid, ex:

myDataGrid.addEventListener(ResizeEvent.RESIZE , onDataGridResize);

In the handler listen for the new width of the data grid, take that number and divide it by the amount of columns (if all columns are to be equal), or do some math to create the 'percentage' for the width of the columns, ex:

private function onDataGridResize(event:ResizeEvent):void {
  colWidth = myDataGrid.width / numberOfColumns;
}