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:

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.

  • Wow! It is really……over-simplified crazy solution.
    Thanks a lot!!!

  • 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…

    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.

  • 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 :)

  • Hi, gr8 post thanks for posting. Information is useful!

  • Hello. I think the article is really interesting. I am even interested in reading more. How soon will you update your blog?

  • @GarykPatton: I usually write new posts on my blog once a week (more or less)

  • This is really awesome !!!
    Wonder why the documentation does not through any light on this…

  • 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:

  • Banksy

    Excellent, well done

  • Abhishek

    This code has helped a lot. It perfevtly works.
    Thanks for posting it.

  • DD

    Thanks for this post
    Now it’s WAAAY easier for me to deal with multiple DataGridColumn widths.

  • Thnq friend…for sharing ur knowledge and helping us

  • Murali

    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.

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

  • GiantSchnoodle

    This was a big help for me and saved me a lot of extra coding. Thanks!

  • You designed some cost-effective aspects there. I seemed on the net to discover out more about the problem and discovered most individuals will go along with your opinions on this web page.

  • valentine

    how to change percent of width AFTER creation complete?