subject:"\[flexcoders\] Re\: Rotate Datagrid Headers"

[flexcoders] Re: Rotate Datagrid Headers

2007-01-23 Thread Tim Hoff


Hi Dana,

A real easy way to do this would be to use a headerRenderer for the
DataGrid columns.

Inline:

mx:DataGrid id=dg height=300 width=300 headerHeight=60
dataProvider={ myDataProvider }
 mx:columns
 mx:Array
 mx:DataGridColumn width=160 headerText=City
dataField=city
  mx:headerRenderer
   mx:Component
 mx:VBox horizontalAlign=center
   mx:Text
  text={ this.data.headerText }
  rotation=90
 
styleName=myEmbeddedFontStyleName/
 /mx:VBox
/mx:Component
   /mx:headerRenderer
 /mx:DataGridColumn
 /mx:Array
 /mx:columns
/mx:DataGrid

Or, if you want to reuse the headerRenderer, create a component:

mx:DataGrid id=dg height=300 width=300 headerHeight=60
dataProvider={ myDataProvider }
 mx:columns
 mx:Array
 mx:DataGridColumn width=160
   headerRenderer=RotatedHeaderRenderer
   headerText=City
   dataField=city/
  mx:DataGridColumn width=160
   headerRenderer=RotatedHeaderRenderer
   headerText=State
   dataField=state/
 /mx:Array
 /mx:columns
/mx:DataGrid

RotatedHeaderRenderer.mxml

?xml version=1.0 encoding=utf-8?
mx:VBox xmlns:mx=http://www.adobe.com/2006/mxml
http://www.adobe.com/2006/mxml  horizontalAlign=center
   mx:Text
  text={ this.data.headerText }
  rotation=90
  styleName=myEmbeddedFontStyleName/
/mx:VBox

-TH
__

Tim Hoff
Cynergy Systems, Inc.
http://www.cynergysystems.com
Office http://www.cynergysystems.comoffice/ : 866-CYNERGY

--- In flexcoders@yahoogroups.com, Dana Gutride [EMAIL PROTECTED] wrote:

 Hi,

 After much searching, I haven't found a satisfactory answer to this
 question. I'm trying to rotate the headers of my datagrid so they are
 completely vertical. I've embedded the font successfully and can
rotate any
 other piece of text in my app, but when I attempt to rotate the text
in the
 datagrid header, it keeps disappearing. I've used both the rotation
 property and created a rotate effect, but to no avail. I think it
might
 have to do with the x and y of the text. Any ideas?

 Thanks,
 Dana

Re: [flexcoders] Re: Rotate Datagrid Headers

2007-01-23 Thread Dana Gutride


Tim:

Thanks for the response.  I neglected to mention that I have been attempting
to use a headerrenderer.  I've created it both inline and in a separate
component and still nothing.  This code below illustrates what I've been
attempting to do, am I missing something?

Thanks,
Dana

?xml version=1.0 encoding=utf-8?
mx:Application xmlns:mx=http://www.adobe.com/2006/mxml; 
   mx:Style
   @font-face {
   src: url(assets/verdana.ttf);
   fontFamily: MyFont;
   }
   .myStyle1{fontFamily:MyFont; fontSize:12pt}
   /mx:Style
 mx:DataGrid id=rootDataGrid width=100% height=100%
headerHeight=300 
   mx:columns
   mx:Array
   mx:DataGridColumn dataField=Name width=100
headerText=Host Name /
   mx:DataGridColumn headerText=City dataField=city
mx:headerRenderer
 mx:Component
   mx:VBox horizontalAlign=center
 mx:Text
text={ this.data.headerText }

rotation=90
styleName=myStyle1/
   /mx:VBox
  /mx:Component
 /mx:headerRenderer
   /mx:DataGridColumn
   /mx:Array
   /mx:columns
   /mx:DataGrid
/mx:Application


On 1/23/07, Tim Hoff [EMAIL PROTECTED] wrote:


  Hi Dana,

A real easy way to do this would be to use a headerRenderer for the
DataGrid columns.

Inline:

mx:DataGrid id=dg height=300 width=300 headerHeight=60
dataProvider={ myDataProvider }
mx:columns
mx:Array
mx:DataGridColumn width=160 headerText=City
dataField=city
 mx:headerRenderer
  mx:Component
mx:VBox horizontalAlign=center
  mx:Text
 text={ this.data.headerText }
 rotation=90

styleName=myEmbeddedFontStyleName/
/mx:VBox
   /mx:Component
  /mx:headerRenderer
/mx:DataGridColumn
/mx:Array
/mx:columns
/mx:DataGrid

Or, if you want to reuse the headerRenderer, create a component:

mx:DataGrid id=dg height=300 width=300 headerHeight=60
dataProvider={ myDataProvider }
mx:columns
mx:Array
mx:DataGridColumn width=160
  headerRenderer=RotatedHeaderRenderer
  headerText=City
  dataField=city/
 mx:DataGridColumn width=160
  headerRenderer=RotatedHeaderRenderer
  headerText=State
  dataField=state/
/mx:Array
/mx:columns
/mx:DataGrid

RotatedHeaderRenderer.mxml

?xml version=1.0 encoding=utf-8?
mx:VBox xmlns:mx=http://www.adobe.com/2006/mxml;
horizontalAlign=center
  mx:Text
 text={ this.data.headerText }
 rotation=90
 styleName=myEmbeddedFontStyleName/
/mx:VBox

-TH
__

*Tim Hoff
*Cynergy Systems, Inc.
http://www.cynergysystems.com http://www.cynergysystems.comoffice/
Office: 866-CYNERGY

--- In flexcoders@yahoogroups.com, Dana Gutride [EMAIL PROTECTED] wrote:

 Hi,

 After much searching, I haven't found a satisfactory answer to this
 question. I'm trying to rotate the headers of my datagrid so they are
 completely vertical. I've embedded the font successfully and can rotate
any
 other piece of text in my app, but when I attempt to rotate the text in
the
 datagrid header, it keeps disappearing. I've used both the rotation
 property and created a rotate effect, but to no avail. I think it might
 have to do with the x and y of the text. Any ideas?

 Thanks,
 Dana

[flexcoders] Re: Rotate Datagrid Headers

2007-01-23 Thread Tim Hoff


Dana:

It doesn't look like it works when you use fontWeight: normal.  If you
use the bold version of the font (copy verdanab.ttf to assets) and make
the following subtle changes, you should be good to go.

mx:Style
  @font-face {
  src:url(assets/verdanab.ttf);
  fontFamily: MyFont;
  fontWeight: bold;
  }
  .myStyle1{
  fontFamily:MyFont;
  fontSize:12pt;
  }
/mx:Style

-TH
__

Tim Hoff
Cynergy Systems, Inc.
http://www.cynergysystems.com
Office http://www.cynergysystems.comoffice/ : 866-CYNERGY

--- In flexcoders@yahoogroups.com, Dana Gutride [EMAIL PROTECTED] wrote:

 Tim:

 Thanks for the response. I neglected to mention that I have been
attempting
 to use a headerrenderer. I've created it both inline and in a separate
 component and still nothing. This code below illustrates what I've
been
 attempting to do, am I missing something?

 Thanks,
 Dana

 ?xml version=1.0 encoding=utf-8?
 mx:Application xmlns:mx=http://www.adobe.com/2006/mxml; 
 mx:Style
 @font-face {
 src: url(assets/verdana.ttf);
 fontFamily: MyFont;
 }
 .myStyle1{fontFamily:MyFont; fontSize:12pt}
 /mx:Style
 mx:DataGrid id=rootDataGrid width=100% height=100%
 headerHeight=300 
 mx:columns
 mx:Array
 mx:DataGridColumn dataField=Name width=100
 headerText=Host Name /
 mx:DataGridColumn headerText=City dataField=city
 mx:headerRenderer
 mx:Component
 mx:VBox horizontalAlign=center
 mx:Text
 text={ this.data.headerText }

 rotation=90
 styleName=myStyle1/
 /mx:VBox
 /mx:Component
 /mx:headerRenderer
 /mx:DataGridColumn
 /mx:Array
 /mx:columns
 /mx:DataGrid
 /mx:Application


 On 1/23/07, Tim Hoff [EMAIL PROTECTED] wrote:
 
  Hi Dana,
 
  A real easy way to do this would be to use a headerRenderer for the
  DataGrid columns.
 
  Inline:
 
  mx:DataGrid id=dg height=300 width=300 headerHeight=60
  dataProvider={ myDataProvider }
  mx:columns
  mx:Array
  mx:DataGridColumn width=160 headerText=City
  dataField=city
  mx:headerRenderer
  mx:Component
  mx:VBox horizontalAlign=center
  mx:Text
  text={ this.data.headerText }
  rotation=90
 
  styleName=myEmbeddedFontStyleName/
  /mx:VBox
  /mx:Component
  /mx:headerRenderer
  /mx:DataGridColumn
  /mx:Array
  /mx:columns
  /mx:DataGrid
 
  Or, if you want to reuse the headerRenderer, create a component:
 
  mx:DataGrid id=dg height=300 width=300 headerHeight=60
  dataProvider={ myDataProvider }
  mx:columns
  mx:Array
  mx:DataGridColumn width=160
  headerRenderer=RotatedHeaderRenderer
  headerText=City
  dataField=city/
  mx:DataGridColumn width=160
  headerRenderer=RotatedHeaderRenderer
  headerText=State
  dataField=state/
  /mx:Array
  /mx:columns
  /mx:DataGrid
 
  RotatedHeaderRenderer.mxml
 
  ?xml version=1.0 encoding=utf-8?
  mx:VBox xmlns:mx=http://www.adobe.com/2006/mxml;
  horizontalAlign=center
  mx:Text
  text={ this.data.headerText }
  rotation=90
  styleName=myEmbeddedFontStyleName/
  /mx:VBox
 
  -TH
  __
 
  *Tim Hoff
  *Cynergy Systems, Inc.
  http://www.cynergysystems.com http://www.cynergysystems.comoffice/
  Office: 866-CYNERGY
 
  --- In flexcoders@yahoogroups.com, Dana Gutride dgutride@ wrote:
  
   Hi,
  
   After much searching, I haven't found a satisfactory answer to
this
   question. I'm trying to rotate the headers of my datagrid so they
are
   completely vertical. I've embedded the font successfully and can
rotate
  any
   other piece of text in my app, but when I attempt to rotate the
text in
  the
   datagrid header, it keeps disappearing. I've used both the
rotation
   property and created a rotate effect, but to no avail. I think it
might
   have to do with the x and y of the text. Any ideas?
  
   Thanks,
   Dana

Re: [flexcoders] Re: Rotate Datagrid Headers

2007-01-23 Thread Dana Gutride


Tim:

Thanks, that definitely helped.  I'm about to ditch these datagrids
altogether, though.  Whenever I add a headerRenderer programmatically, the
datagrid throws a 1010 run time error if I try to scroll it vertically.  I
appreciate your help, though.

Dana

On 1/23/07, Tim Hoff [EMAIL PROTECTED] wrote:


  Dana:

It doesn't look like it works when you use fontWeight: normal.  If you use
the bold version of the font (copy verdanab.ttf to assets) and make the
following subtle changes, you should be good to go.

mx:Style
 @font-face {
 src:url(assets/verdanab.ttf);
 fontFamily: MyFont;
 fontWeight: bold;
 }
 .myStyle1{
 fontFamily:MyFont;
 fontSize:12pt;
 }
/mx:Style

-TH
__

*Tim Hoff
*Cynergy Systems, Inc.
http://www.cynergysystems.com http://www.cynergysystems.comoffice/
Office: 866-CYNERGY

--- In flexcoders@yahoogroups.com, Dana Gutride [EMAIL PROTECTED] wrote:

 Tim:

 Thanks for the response. I neglected to mention that I have been
attempting
 to use a headerrenderer. I've created it both inline and in a separate
 component and still nothing. This code below illustrates what I've been
 attempting to do, am I missing something?

 Thanks,
 Dana

 ?xml version=1.0 encoding=utf-8?
 mx:Application xmlns:mx=http://www.adobe.com/2006/mxml; 
 mx:Style
 @font-face {
 src: url(assets/verdana.ttf);
 fontFamily: MyFont;
 }
 .myStyle1{fontFamily:MyFont; fontSize:12pt}
 /mx:Style
 mx:DataGrid id=rootDataGrid width=100% height=100%
 headerHeight=300 
 mx:columns
 mx:Array
 mx:DataGridColumn dataField=Name width=100
 headerText=Host Name /
 mx:DataGridColumn headerText=City dataField=city
 mx:headerRenderer
 mx:Component
 mx:VBox horizontalAlign=center
 mx:Text
 text={ this.data.headerText }

 rotation=90
 styleName=myStyle1/
 /mx:VBox
 /mx:Component
 /mx:headerRenderer
 /mx:DataGridColumn
 /mx:Array
 /mx:columns
 /mx:DataGrid
 /mx:Application


 On 1/23/07, Tim Hoff [EMAIL PROTECTED] wrote:
 
  Hi Dana,
 
  A real easy way to do this would be to use a headerRenderer for the
  DataGrid columns.
 
  Inline:
 
  mx:DataGrid id=dg height=300 width=300 headerHeight=60
  dataProvider={ myDataProvider }
  mx:columns
  mx:Array
  mx:DataGridColumn width=160 headerText=City
  dataField=city
  mx:headerRenderer
  mx:Component
  mx:VBox horizontalAlign=center
  mx:Text
  text={ this.data.headerText }
  rotation=90
 
  styleName=myEmbeddedFontStyleName/
  /mx:VBox
  /mx:Component
  /mx:headerRenderer
  /mx:DataGridColumn
  /mx:Array
  /mx:columns
  /mx:DataGrid
 
  Or, if you want to reuse the headerRenderer, create a component:
 
  mx:DataGrid id=dg height=300 width=300 headerHeight=60
  dataProvider={ myDataProvider }
  mx:columns
  mx:Array
  mx:DataGridColumn width=160
  headerRenderer=RotatedHeaderRenderer
  headerText=City
  dataField=city/
  mx:DataGridColumn width=160
  headerRenderer=RotatedHeaderRenderer
  headerText=State
  dataField=state/
  /mx:Array
  /mx:columns
  /mx:DataGrid
 
  RotatedHeaderRenderer.mxml
 
  ?xml version=1.0 encoding=utf-8?
  mx:VBox xmlns:mx=http://www.adobe.com/2006/mxml;
  horizontalAlign=center
  mx:Text
  text={ this.data.headerText }
  rotation=90
  styleName=myEmbeddedFontStyleName/
  /mx:VBox
 
  -TH
  __
 
  *Tim Hoff
  *Cynergy Systems, Inc.
  http://www.cynergysystems.com http://www.cynergysystems.comoffice/
  Office: 866-CYNERGY
 
  --- In flexcoders@yahoogroups.com, Dana Gutride dgutride@ wrote:
  
   Hi,
  
   After much searching, I haven't found a satisfactory answer to this
   question. I'm trying to rotate the headers of my datagrid so they
are
   completely vertical. I've embedded the font successfully and can
rotate
  any
   other piece of text in my app, but when I attempt to rotate the text
in
  the
   datagrid header, it keeps disappearing. I've used both the rotation
   property and created a rotate effect, but to no avail. I think it
might
   have to do with the x and y of the text. Any ideas?
  
   Thanks,
   Dana

[flexcoders] Re: Rotate Datagrid Headers

Re: [flexcoders] Re: Rotate Datagrid Headers

[flexcoders] Re: Rotate Datagrid Headers

Re: [flexcoders] Re: Rotate Datagrid Headers

4 matches

Site Navigation

Mail list logo

Footer information