Automatically resize width of DataGridCoulmn/AdvancedDataGridColumn to fit content

Question

Hi,

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

Hi Ravz,

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

Answer 2

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.