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

Sleight

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.

Laveen

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;
}

Celaeno

The problem is that I would like to have the texts within a column to appear comfortably. Hence resizing the column to the length of the longest text. – Sleight

Answer 3

You can set the width to some fixed percentage if you can guess the possible width. But i would suggest another optiong :

1. set the variableRowHeight property of the datagrid to true
2. set the wordWrap property of the column which will have longer text to true.

By this way your long text will be put in multiple lines and only that row height will be increased. just give it a try. if you dont want this, then i think you may need to write a new class extending datagridColumn.

<mx:DataGrid dataProvider="{testAC}" width="80%" height="100%" variableRowHeight="true">
         <mx:columns>
              <mx:DataGridColumn dataField="company" wordWrap="true"/>                    <mx:DataGridColumn dataField="share"/>
              <mx:DataGridColumn dataField="expense"/>
        </mx:columns>
 </mx:DataGrid>

Cheers, PK

Bloodthirsty

That solution doesn't help if the text is a single word or a numerical value, which would not wrap, or, in the case of a formatted number (say 2,300,152) it would wrap inappropriately at the commas. – Laveen

Answer 4

I had the same problem, you should know beforehand the size of your longer string, then assigns the MinWidth that size and have the column resizeable = 'false'.

It worked for me

Playbook