Hello All,
Does anyone have any experience with rendering a vertical label as a column
header for an AdvancedDataGrid? I've extended the
AdvancedDataGridHeaderRenderer. I've also embedded the font to allow the label
to be rotated 270 degrees. I've also reposition the label to fit the header
because the rotation axis is in the upper left corner of the label.

I've been sucessful in creating a renderer for the regular DataGrid, but the
AdvancedDataGrid seems to be a totally different beast.

Any tips or code examples would be much appreciated.:confused;

Adobe Newsbot hopes that the following resources helps you. NewsBot is experimental and any feedback (reply to this post) on its utility will be appreciated:

Flex 3 - About behaviors:
Examples of effects are fading, resizing, or moving a component. .... Note: To use the Fade effect with text, you must use an embedded font,
Link: http://livedocs.adobe.com/flex/3/html/behaviors_02.html

Styling a Flex Button control using embedded fonts at Flex Examples:
The following example shows how you can customize the appearance of a Flex Button control by using an embedded font and removing the Buttons default skin.
Link: http://blog.flexexamples.com/2007/08...mbedded-fonts/

Flex 3 - Working with item renderers:
Example: Using an item renderer with a DataGrid control ... This item renderer uses a Label control to insert the text 'Sale Price!
Link: http://livedocs.adobe.com/flex/3/htm...enderer_8.html

Using embedded fonts with the Panel container in Flex at Flex Examples:
The following example shows how you can use an embedded font with the Flex ... Displaying the sort arrow in a Flex DataGrid control without having to click
Link: http://blog.flexexamples.com/2008/02...ainer-in-flex/

mx.controls.DataGrid (Flex 3):
Examples using item editors with the list-based controls ...... Creates a new object using a context based on the embedded font being used.
Link: http://livedocs.adobe.com/flex/3/lan.../DataGrid.html

Disclaimer: This response is generated automatically by the Adobe NewsBot based on Adobe [L=Community Engine]http://community.adobe.com/ion/search.html[/L].

Did you ever figure it out? I need to do the same thing: print vertical text as the header for an AdvancedDataGridColumn.

Thanks.

dalejoel,
I sort of got it working. I'm not totally happy with the look of it but the
header is vertical. I think my stylesheets are conflicting.

I first created a new container by extending the Canvas and adding a Label
into it. I rotated the label 270 degrees and repositioned it so that the label
is visible. Other settings such as scrolling needed to be turned off.

Then, I extended AdvancedDataGridHeaderRenderer. I had to remove the label in
the renderer and replaced it with a VBox container. Next I placed the
component I created above into the VBox.

In the AdvancedDataGrid, set the headerRenderer to your new renderer.

That's the general idea behind what I implemented. See attached code.
(sample code is modified from working source and have not been tested.) Good
luck. Let me know if you see areas for improvements. I was spending too much
time on this and my other work was piling up.

VERTICAL LABEL: ==========================================

<mx:Style>
@font-face {
src: local("Verdana");
fontFamily: VerdanaEmbedded;
}

@font-face {
src: local("Verdana");
fontFamily: VerdanaEmbedded;
fontWeight: bold;
}
</mx:Style>

<mx:Script>
<![CDATA[
import mx.core.UITextField;
import mx.managers.SystemManager;

[Bindable] public var txtField:UITextField = new UITextField();
[Bindable] public var text:String;


private function initLabel():void {
txtLbl.text = txtField.text;

txtLbl.x = + width / 2 - 8;
txtLbl.y = + parent.parent.height;

txtLbl.rotation = 270;

txtLbl.toolTip = txtField.text;

}
]]>
</mx:Script>

<mx:Label id="txtLbl" fontFamily="VerdanaEmbedded" fontWeight="bold"
rotation="270" width="100%" height="100%"
paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"/>


HEADER RENDERER: ====================================

/**
* Container of the header text.
*/
private var vBox:VBox ;

public function VADGHeaderRenderer()
{
super();

vBox = new VBox() ;
vBox.styleName = this.styleName ;
vBox.setStyle("horizontalAlign","center") ;


}

/**
* Overridden to make vertical.
* Also, label component is removed from the Header and added to vBox.
* So that, Styles of the Header does not get affected.
*/
override protected function createChildren():void {
super.createChildren();
removeChild(label as DisplayObject) ;

addChild(vBox) ;
vBox.percentHeight = 100;
vBox.percentWidth = 100;
vBox.horizontalScrollPolicy = "off";
vBox.verticalScrollPolicy = "off";

var vLabel:VerticalLabel = new VerticalLabel;

(vLabel as Canvas).styleName = vBox.styleName;

vLabel.txtField = label as UITextField;
vBox.addChild(vLabel as DisplayObject);

}

/**
* used to align the contents
*/
private function sizeRenderer():void {
vBox.setActualSize( getExplicitOrMeasuredWidth()- 20
,vBox.getExplicitOrMeasuredHeight()) ;

//switched height and width
measuredHeight = measuredMinHeight =
vBox.getExplicitOrMeasuredWidth() ;
measuredWidth = measuredMinWidth =
vBox.getExplicitOrMeasuredHeight() - 20 ;
}


override protected function measure():void {
super.measure() ;
sizeRenderer() ;
}

override protected function
updateDisplayList(unscaledWidth:Number,unscaledHei ght:Number):void {
super.updateDisplayList(unscaledWidth,unscaledHeig ht) ;

sizeRenderer();
}

Did you ever figure it out? I need to do the same thing: print vertical text as the header for an AdvancedDataGridColumn.

Thanks.

Did you ever figure it out? I need to do the same thing: print vertical text as the header for an AdvancedDataGridColumn.

Thanks.

dalejoel,
I sort of got it working. I'm not totally happy with the look of it but the
header is vertical. I think my stylesheets are conflicting.

I first created a new container by extending the Canvas and adding a Label
into it. I rotated the label 270 degrees and repositioned it so that the label
is visible. Other settings such as scrolling needed to be turned off.

Then, I extended AdvancedDataGridHeaderRenderer. I had to remove the label in
the renderer and replaced it with a VBox container. Next I placed the
component I created above into the VBox.

In the AdvancedDataGrid, set the headerRenderer to your new renderer.

That's the general idea behind what I implemented. See attached code.
(sample code is modified from working source and have not been tested.) Good
luck. Let me know if you see areas for improvements. I was spending too much
time on this and my other work was piling up.

VERTICAL LABEL: ==========================================

<mx:Style>
@font-face {
src: local("Verdana");
fontFamily: VerdanaEmbedded;
}

@font-face {
src: local("Verdana");
fontFamily: VerdanaEmbedded;
fontWeight: bold;
}
</mx:Style>

<mx:Script>
<![CDATA[
import mx.core.UITextField;
import mx.managers.SystemManager;

[Bindable] public var txtField:UITextField = new UITextField();
[Bindable] public var text:String;


private function initLabel():void {
txtLbl.text = txtField.text;

txtLbl.x = + width / 2 - 8;
txtLbl.y = + parent.parent.height;

txtLbl.rotation = 270;

txtLbl.toolTip = txtField.text;

}
]]>
</mx:Script>

<mx:Label id="txtLbl" fontFamily="VerdanaEmbedded" fontWeight="bold"
rotation="270" width="100%" height="100%"
paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"/>


HEADER RENDERER: ====================================

/**
* Container of the header text.
*/
private var vBox:VBox ;

public function VADGHeaderRenderer()
{
super();

vBox = new VBox() ;
vBox.styleName = this.styleName ;
vBox.setStyle("horizontalAlign","center") ;


}

/**
* Overridden to make vertical.
* Also, label component is removed from the Header and added to vBox.
* So that, Styles of the Header does not get affected.
*/
override protected function createChildren():void {
super.createChildren();
removeChild(label as DisplayObject) ;

addChild(vBox) ;
vBox.percentHeight = 100;
vBox.percentWidth = 100;
vBox.horizontalScrollPolicy = "off";
vBox.verticalScrollPolicy = "off";

var vLabel:VerticalLabel = new VerticalLabel;

(vLabel as Canvas).styleName = vBox.styleName;

vLabel.txtField = label as UITextField;
vBox.addChild(vLabel as DisplayObject);

}

/**
* used to align the contents
*/
private function sizeRenderer():void {
vBox.setActualSize( getExplicitOrMeasuredWidth()- 20
,vBox.getExplicitOrMeasuredHeight()) ;

//switched height and width
measuredHeight = measuredMinHeight =
vBox.getExplicitOrMeasuredWidth() ;
measuredWidth = measuredMinWidth =
vBox.getExplicitOrMeasuredHeight() - 20 ;
}


override protected function measure():void {
super.measure() ;
sizeRenderer() ;
}

override protected function
updateDisplayList(unscaledWidth:Number,unscaledHei ght:Number):void {
super.updateDisplayList(unscaledWidth,unscaledHeig ht) ;

sizeRenderer();
}

Did you ever figure it out? I need to do the same thing: print vertical text as the header for an AdvancedDataGridColumn.

Thanks.

dalejoel,
I sort of got it working. I'm not totally happy with the look of it but the
header is vertical. I think my stylesheets are conflicting.

I first created a new container by extending the Canvas and adding a Label
into it. I rotated the label 270 degrees and repositioned it so that the label
is visible. Other settings such as scrolling needed to be turned off.

Then, I extended AdvancedDataGridHeaderRenderer. I had to remove the label in
the renderer and replaced it with a VBox container. Next I placed the
component I created above into the VBox.

In the AdvancedDataGrid, set the headerRenderer to your new renderer.

That's the general idea behind what I implemented. See attached code.
(sample code is modified from working source and have not been tested.) Good
luck. Let me know if you see areas for improvements. I was spending too much
time on this and my other work was piling up.

VERTICAL LABEL: ==========================================

<mx:Style>
@font-face {
src: local("Verdana");
fontFamily: VerdanaEmbedded;
}

@font-face {
src: local("Verdana");
fontFamily: VerdanaEmbedded;
fontWeight: bold;
}
</mx:Style>

<mx:Script>
<![CDATA[
import mx.core.UITextField;
import mx.managers.SystemManager;

[Bindable] public var txtField:UITextField = new UITextField();
[Bindable] public var text:String;


private function initLabel():void {
txtLbl.text = txtField.text;

txtLbl.x = + width / 2 - 8;
txtLbl.y = + parent.parent.height;

txtLbl.rotation = 270;

txtLbl.toolTip = txtField.text;

}
]]>
</mx:Script>

<mx:Label id="txtLbl" fontFamily="VerdanaEmbedded" fontWeight="bold"
rotation="270" width="100%" height="100%"
paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"/>


HEADER RENDERER: ====================================

/**
* Container of the header text.
*/
private var vBox:VBox ;

public function VADGHeaderRenderer()
{
super();

vBox = new VBox() ;
vBox.styleName = this.styleName ;
vBox.setStyle("horizontalAlign","center") ;


}

/**
* Overridden to make vertical.
* Also, label component is removed from the Header and added to vBox.
* So that, Styles of the Header does not get affected.
*/
override protected function createChildren():void {
super.createChildren();
removeChild(label as DisplayObject) ;

addChild(vBox) ;
vBox.percentHeight = 100;
vBox.percentWidth = 100;
vBox.horizontalScrollPolicy = "off";
vBox.verticalScrollPolicy = "off";

var vLabel:VerticalLabel = new VerticalLabel;

(vLabel as Canvas).styleName = vBox.styleName;

vLabel.txtField = label as UITextField;
vBox.addChild(vLabel as DisplayObject);

}

/**
* used to align the contents
*/
private function sizeRenderer():void {
vBox.setActualSize( getExplicitOrMeasuredWidth()- 20
,vBox.getExplicitOrMeasuredHeight()) ;

//switched height and width
measuredHeight = measuredMinHeight =
vBox.getExplicitOrMeasuredWidth() ;
measuredWidth = measuredMinWidth =
vBox.getExplicitOrMeasuredHeight() - 20 ;
}


override protected function measure():void {
super.measure() ;
sizeRenderer() ;
}

override protected function
updateDisplayList(unscaledWidth:Number,unscaledHei ght:Number):void {
super.updateDisplayList(unscaledWidth,unscaledHeig ht) ;

sizeRenderer();
}

Did you ever figure it out? I need to do the same thing: print vertical text as the header for an AdvancedDataGridColumn.

Thanks.