10 Replies Latest reply on Jan 27, 2014 12:02 AM by xiaoyuandlg

    AdvancedDataGrid Vertical Column Headers

    synga Level 1
      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.
        • 1. Re: AdvancedDataGrid Vertical Column Headers
          Level 7
          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/28/styling-a-flex-button-control-using-embedded-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/html/cellrenderer_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/28/using-embedded-fonts-with-the-panel-container-in-f lex/

          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/langref/mx/controls/DataGrid.html

          Disclaimer: This response is generated automatically by the Adobe NewsBot based on Adobe Community Engine.
          • 2. Re: AdvancedDataGrid Vertical Column Headers
            dalejoel Level 1
            Did you ever figure it out? I need to do the same thing: print vertical text as the header for an AdvancedDataGridColumn.

            Thanks.
            • 3. Re: AdvancedDataGrid Vertical Column Headers
              synga Level 1
              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.
              • 4. Re: AdvancedDataGrid Vertical Column Headers
                dalejoel Level 1
                synga -
                I'm using what you did as a base line to see if I can do it a little more simply. I'm curious how far you got before you ended up with your VBox approach. I am overriding the AdvancedDataGridHeaderRenderer and am able to
                1) Rotate the text
                2) Resize the height of the header

                However - I am not able to move the label nor adjust the width of the header. So that baffles me. Below is my custom renderer. Did you have the same problems as me that led you to the VBox approach? And for that matter, why put a canvas in a VBox? Why not just put your label directly in the VBox?

                Thanks - here's my code too see if it helps:

                public class VerticalHeaderRenderer extends AdvancedDataGridHeaderRenderer
                {
                public function VerticalHeaderRenderer()
                {
                super();
                this.setStyle("fontFamily", "Algerian");
                this.setStyle("fontWeight", "normal");
                this.rotation = -90;
                }
                override protected function measure():void
                {
                super.measure();
                measuredHeight = label.textWidth; //This line did change the height of the column
                measuredWidth = 80; // This did nothing!?!
                }

                }
                • 5. Re: AdvancedDataGrid Vertical Column Headers
                  dalejoel Level 1
                  okay - here's an update. This seems to work like a charm, not exactly sure why. But I noticed that changing the width on the column when dragging the columns on the ADG would adjust the height of the internal label. So I overrode updateDisplayList and swapped the width/height parameters and it all worked. Even if I set the explicitWidth of the label, that wouldn't work. I just simply had to swap the two parameters. Here's my working code.


                  public class VerticalHeaderRenderer extends AdvancedDataGridHeaderRenderer
                  {
                  public function VerticalHeaderRenderer()
                  {
                  super();
                  this.setStyle("fontFamily", "Arial");
                  this.setStyle("fontWeight", "normal");
                  this.setStyle("fontSize", "12");
                  }
                  override public function set data(value:Object):void
                  {
                  super.data = value;

                  }
                  override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
                  {
                  super.updateDisplayList(unscaledHeight, unscaledWidth);
                  label.rotation = -90;
                  label.x = width / 2 - label.textHeight / 2;
                  label.y = height;
                  }

                  override protected function measure():void
                  {
                  super.measure();
                  measuredHeight = label.textWidth + 12;
                  }
                  }
                  • 6. Re: AdvancedDataGrid Vertical Column Headers
                    oaktown_matt Level 1
                    This is exactly what I am trying to solve, but it is not working for me. Basically, the header is blank / empty for that column. Guidance?
                    • 7. Re: AdvancedDataGrid Vertical Column Headers
                      synga Level 1
                      Don't have time to look at your code closely but I didn't see any obvious problems. A quick thing to check is to make sure your font is embedded.
                      • 8. Re: AdvancedDataGrid Vertical Column Headers
                        dalejoel Level 1
                        I agree with synga. Make sure you properly embedded your font. By simply commenting out the rotation, if you suddenly see your text then it would be a font embedding problem.
                        • 9. Re: AdvancedDataGrid Vertical Column Headers
                          jaraman Level 1

                          oaktown_matt, dalejoel has anybody solved this problem yet?? please help me, i embedded font in as3 class but flash builder shows me the  problem "Embed is only supported on classes and member variables"

                          Here is my code:

                          package

                          {

                              import mx.controls.advancedDataGridClasses.AdvancedDataGridHeaderRenderer;   

                             

                             

                              public class VerticalHeaderRenderer extends mx.controls.advancedDataGridClasses.AdvancedDataGridHeaderRenderer

                              {

                                  [Embed(source="assets/Verdana.ttf", fontName="DefaultFont")]

                                      public function VerticalHeaderRenderer()

                                  {

                                      super();

                                      this.setStyle("fontFamily", "DefaultFont");

                                      this.setStyle("fontWeight", "normal");

                                      this.setStyle("fontSize", "12");

                                  }

                                  override public function set data(value:Object):void

                                  {

                                      super.data = value;

                                     

                                  }

                                  override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void

                                  {

                                      super.updateDisplayList(unscaledHeight, unscaledWidth);

                                      label.rotation = -90;

                                      label.x = width / 2 - label.textHeight / 2;

                                      label.y = height;

                                  }       

                                  override protected function measure():void

                                  {

                                      super.measure();

                                      measuredHeight = label.textWidth + 12;

                                  }

                          }

                          }

                           

                          and mxml filse is here

                           

                          <mx:AdvancedDataGrid id="myADG" width="100%" height="100%" editable="true" sortItemRenderer="{null}">      

                                  <mx:groupedColumns>

                                      <mx:AdvancedDataGridColumn dataField="Students" sortable="false"  headerRenderer="VerticalHeaderRenderer"/>

                                      <mx:AdvancedDataGridColumnGroup headerText="Criteria A " headerWordWrap="true">

                                      <mx:AdvancedDataGridColumn dataField="task" headerWordWrap="true" headerText="Home task" />                                   

                                      <mx:AdvancedDataGridColumn dataField="task1" headerText="Home task1" headerWordWrap="true"/>               

                                      <mx:AdvancedDataGridColumn dataField="task2" headerText="Home task2" headerWordWrap="true"/>

                                      <mx:AdvancedDataGridColumn dataField="task3" headerText="Home task3" fontStyle="italic"/>

                                      </mx:AdvancedDataGridColumnGroup>

                                    </mx:groupedColumns>

                          </mx:AdvancedDataGrid>

                          • 10. Re: AdvancedDataGrid Vertical Column Headers
                            xiaoyuandlg Level 1

                            I've had experience towards another data grid view, and I also coped something like the grid header question. However, those experience doesn't seems to be fitted here.