coder and technology lover
Set DataGridColumn’s width in percentage with ease
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.
| Print article | This entry was posted by Davide Zanotti on 18, Wednesday f, 2009 at 3:40 pm, and is filed under flex. Follow any responses to this post through RSS 2.0. You can leave a response or trackback from your own site. |
about 1 year ago
Wow! It is really……over-simplified crazy solution.
Thanks a lot!!!
about 1 year ago
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.
about 1 year ago
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 :)
about 1 year ago
Hi, gr8 post thanks for posting. Information is useful!
about 1 year ago
Hello. I think the article is really interesting. I am even interested in reading more. How soon will you update your blog?
about 1 year ago
@GarykPatton: I usually write new posts on my blog once a week (more or less)
about 11 months ago
This is really awesome !!!
Wonder why the documentation does not through any light on this…
about 9 months ago
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
about 8 months ago
Excellent, well done
about 5 months ago
This code has helped a lot. It perfevtly works.
Thanks for posting it.
about 2 months ago
Thanks for this post
Now it’s WAAAY easier for me to deal with multiple DataGridColumn widths.