Archive

Posts Tagged ‘header’

DataGrid – vertical text on header

December 8th, 2007 No comments

The ideea behind vertical text on header is inspired by the use of CheckBox as an itemRenderer in a DataGrid. The width of the header of that column will be too large, so you need to do something to make it look good.

First, we define a header renderer component, let’s say that is based on VBox and has a Label inside. The plan is to use the rotate ability of Label, to make it vertical. The main problem (which exists since the begining of Flash) is that you’ll have to embed your fonts that are used on rotated components, risking otherwise not to see the text.

Here is the component (named VDGHeader.mxml):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" paddingLeft="20" paddingTop="0" width="100%" height="100%">
<mx:Script>
<![CDATA[
[Embed(systemFont='Verdana', fontName='myVerdana', mimeType='application/x-font', unicodeRange='U+0020-U+007E')] public var myVerdana:Class;
 
import mx.controls.dataGridClasses.DataGridColumn;
import mx.managers.SystemManager;
import de.richinternet.utils.Dumper;
 
[Bindable] private var text:String;
[Bindable] private var src:String;
 
override public function set data(value:Object):void{
var col:DataGridColumn = value as DataGridColumn;
text = col.headerText;
}
]]>
</mx:Script>
<mx:Label id="txtLbl" text="{text}" fontFamily="myVerdana" rotation="90" width="100%" />
</mx:VBox>

As you can see, I’ve embeded only the most used chars from the font, to optimize size. Component overrides the setter of data, which will catch the headerText property of a DataGridColumn.

Example of usage :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<mx:DataGrid
verticalCenter="0" horizontalCenter="0"
height="100%" width="100%"
headerHeight="180"
id="mainList"
dataProvider="{items}"
textAlign="center"
editable="false">
<mx:columns>
<mx:DataGridColumn headerText="id" dataField="id" visible="false"/>
<mx:DataGridColumn headerText="Contact name" dataField="name" width="120"/>
<mx:DataGridColumn headerText="Contact surname" dataField="surname"/>
<mx:DataGridColumn headerText="Active" dataField="active" headerRenderer="VDGHeader" width="20">
<mx:itemRenderer>
<mx:Component>
<mx:CheckBox selected="{data.active}"/>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:columns>
Categories: Adobe Flex Tags: , , ,