I was trying to set the columns of a DataGrid to a certain percentage, but I discovered that inexplicably DataGridColumn doesn’t provide percentageWidth property nor it accepts a percentage string as width property… so I did a quick search on google and I found that is sad but true and moreover the solution I found on the web is to use a function to calculate each single column width after creationComplete event is dispatched… terrible! However I did a test before, by assign a decimal value to width (0.5 instead of 50%) and it works! The width property in fact accepts a Number as value not an int, so we can specify a value under 1, which is treated as a percentage… what surprise me, is that no one seems to had this idea… anyway I hope this will be helpful for all.
This is a piece of my AS code to set DataGridColumn width in percentage:
1 2 | col = new DataGridColumn(); col.width = options[i] == "Message" ? 0.6 : 0.1; |
In my code I’m setting the columns to 10% and to 60% only for “Message” column.
April 19th, 2009 10:24 am
Wow! It is really……over-simplified crazy solution.
Thanks a lot!!!
April 22nd, 2009 5:25 pm
Your solution only works for percentages, but not a combination of the two. What if I want the first column to be 70%, the second to be 30%, and the last to be 50 pixels like this…
2
3
4
5
6
7
<mx:columns>
<mx:DataGridColumn dataField="label" width="0.7"/>
<mx:DataGridColumn dataField="data" width="0.3"/>
<mx:DataGridColumn dataField="extra" width="50"/>
</mx:columns>
</mx:DataGrid>
The result is that the last column is gigantic whereas the other two are tiny. The reason is because the DataGrid takes the total of all the widths and then uses the total width of the DataGrid to allocate a percentage to each. For purely percentage-based columns, this works, but not for a combination.
April 23rd, 2009 12:50 am
You are perfectly right Nate, I don’t tried a combination like your example in my test :P
Thanks for the catch ;)
ps. Anyway you can play with minWidth property of percentage columns, something like:
doesn’t solve the problem, but can help :)
June 14th, 2009 6:32 pm
Hi, gr8 post thanks for posting. Information is useful!
June 15th, 2009 8:09 pm
Hello. I think the article is really interesting. I am even interested in reading more. How soon will you update your blog?
June 17th, 2009 4:59 am
@GarykPatton: I usually write new posts on my blog once a week (more or less)
August 26th, 2009 8:15 am
This is really awesome !!!
Wonder why the documentation does not through any light on this…
October 14th, 2009 2:02 am
Hi Davide,
You’ve described an smart and simple to code workaround for “how-to” specify percentage width values for the width of Adobe Flex Datagrid’s columns.
Unfortunately, this workaround is not applicable if the developer will specify explicit “minWidth” value for any column.
Nate’s extension for DataGrid called ScalableDataGrid looks and works in more solid way to provide the support for percentage width values for DataGrid’s columns:
http://natescodevault.com/?p=67
November 3rd, 2009 2:34 pm
Excellent, well done
February 8th, 2010 2:13 am
This code has helped a lot. It perfevtly works.
Thanks for posting it.
May 28th, 2010 6:07 am
Thanks for this post
Now it’s WAAAY easier for me to deal with multiple DataGridColumn widths.
June 22nd, 2011 4:21 am
Thnq friend…for sharing ur knowledge and helping us
July 20th, 2011 3:51 am
Great. This indeed works. I was cursing Flex for not providing percentage support for data grid column width until I found your solution. Thanks a ton.
January 5th, 2012 5:16 am
hi,
i am using this way but could not work
public function setwidth():void
{
id_EmergencyContactsGrid.columns[0].width = 0.5;
id_EmergencyContactsGrid.columns[1].width = 0.2;
id_EmergencyContactsGrid.columns[2].width = 0.05;
id_EmergencyContactsGrid.columns[3].width = 0.15;
id_EmergencyContactsGrid.columns[4].width = 0.1;
}