bug ?

Setting the font-size in % does not preserve column width above 100%

grid.getCellTemplate().setStyle("font-size:130%;color:blue;");


<style>
#myGrid .aw-column-0 {width: 3em; text-align: center}
#myGrid .aw-column-1 {width: 10em;}
#myGrid .aw-column-2 {width: 6em; text-align: right}
#myGrid .aw-column-3 {width: 6em; text-align: center}
#myGrid .aw-grid-row {height:1em;line-height:1.1em}
#myGrid .aw-header-0 {height:1em;line-height:1em}
</style>
<script>

var myData = [
[1, "World", 1018057389, 2005, "world"],
[2, "European Union", 247000000, 2006, "eu"],
[3, "United States", 205326680, 2005, "us"],
[4, "China", 123000000, 2006, "cn"],
[5, "Japan", 86300000, 2005, "jp"],
[6, "India", 60000000, 2005, "in"],
[7, "Germany", 50616000, 2006, "de"],
[8, "United Kingdom", 37600000, 2005, "gb"],
[9, "Korea South", 33900000, 2005, "kr"],
[10, "France", 29945000, 2006, "fr"] // no comma in the last line
];

var myHeaders = ["Rank", "Country", "Internet users", "Data from"];

</script>

<!-- create controls -->
<script>

var num = new AW.Formats.Number;
num.setTextFormat("#,###.");

var grid = new AW.UI.Grid;
grid.setId("myGrid");
grid.setHeaderText(myHeaders);
grid.setCellData(myData);
grid.setCellFormat(num, 2);
grid.setColumnCount(4);
grid.setRowCount(10);
grid.getCellTemplate().setStyle("font-size:130%;color:blue;");
grid.refresh();
</script>

You cannot set the column width in 'em' and then assign different font sizes to headers and cells - the width will be different.

Also the correct syntax for setStyle method will be

grid.getCellTemplate().setStyle("font-size", "50%");
grid.getCellTemplate().setStyle("color", "blue");

You can make it work using cell template with inner text element and assigning the style to the text and not to the cell box -

var cell = new AW.Templates.Text;
cell.getContent("box/text").setStyle("font-size", "130%");
cell.getContent("box/text").setStyle("color", "blue");
grid.setCellTemplate(cell);

This means that I can control header width and column width separately using getCellTemplate(i).setStyle("width","10em") and getHeaderTemplate(i).setStyle("width","20em").
That's interesting, especially as there are two headers, one can be used to group columns together.

Hmm... problem is now that I can't resize columns. The feature is then broken.

Anyway, now the question still remain how to set the column width programmatically using "em" unit?