2 Replies Latest reply on Nov 18, 2009 9:08 AM by Mike6679

    datagrid verticalAlign headerText

    deviskec
      Hi everyone, i'm wondering how to vertical align my header text in a datagrid component. I can easily align the text in my cells using the verticalAlign style, but the header doesnt have such a style so it doesnt work. I've tried extending the DataGridHeader class, but I don't know how to set the DataGrid component to use my DataGridHeader as the header renderer. Also I'm missing a DataGridHeaderRenderer class, has any1 had any experience with this ?

      P.S. The AdvancedDatagrid does have a verticalAlign style name that does work for the header too, but do I really have to buy flex charting to align my header text vertically while I can align the text inside the cells perfectly?
        • 1. Re: datagrid verticalAlign headerText
          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 item renderers:
          Each of these fields appears in the DataGrid control using the default item renderer, .... Many Flex components implement this interface, such as the chart

          Link: http://livedocs.adobe.com/flex/3/html/cellrenderer_2.html

          Adobe - Developer Center : Beyond the DataGrid Control: Better:
          With the release of Flex 1.5, Macromedia gives you a new set of highly customizable charting components you can use to win friends, impress your coworkers,

          Link: http://www.adobe.com/devnet/flex/articles/charting.html

          All Packages (Flex 3):
          effectClasses, The mx.charts.effects.effectClasses package contains the effect instance classes for the Flex charting components.

          Link: http://livedocs.adobe.com/flex/3/langref/package-summary.html

          Ted On Flex: Flex 3 - Wednesday: Components and SDK Enhancements:
          Jun 6, 2007 ... Although we have released an early build of the Flex component kit ... I can't wait to get my hands on the new datagrid...a beta this week

          Link: http://www.onflex.org/ted/2007/06/flex-3-wednesday-components-and-sdk.php

          All Classes (Flex 3):
          mx.charts.chartClasses, The ChartBase class is the link between the Flex component architecture and the DualStyleObject architecture.

          Link: http://livedocs.adobe.com/flex/3/langref/class-summary.html

          Datagrid Component Sharp Mind:
          Filed under: Flex Components Kanu Wadhwa @ 7:06 pm. The default behavior of editing a cell in a Flex DataGrid is such that if you hit the enter key its

          Link: http://kanuwadhwa.wordpress.com/2007/08/13/datagrid-component/



          Disclaimer: This response is generated automatically by the Adobe NewsBot based on Adobe Community Engine.
          • 2. Re: datagrid verticalAlign headerText
            Mike6679

            create a renderer for your column header:

             

             

               <dataGrid x="23.5" y="105.9" width="400" height="346"  id="datagrid_codes"
                            verticalGridLines= "false"
                             horizontalGridLines= "false"
                             styleName="dataGridResults"                
                             headerHeight =   "{DATAGRID_HEADER_HEIGHT}"
                             rowHeight = "{DATAGRID_ROW_HEIGHT}"
                             headerBackgroundSkin="DataGrid_headerBackgroundSkin"
                               >
                       
                        <dataGridAlphaRows:columns>
                            <mx:DataGridColumn wordWrap="true" headerText="Keyword" dataField="keywords"  
                                              headerRenderer="action.datagrid.dataGridHeaderRenderer"/>
                            <mx:DataGridColumn wordWrap="true" headerText="Category" dataField="name"
                                                headerRenderer="action.datagrid.dataGridHeaderRenderer"/>
                            <mx:DataGridColumn headerText="Code" dataField="code"
                                               headerRenderer="action.datagrid.dataGridHeaderRenderer"/>
                        </dataGridAlphaRows:columns>
                 >

             

             

             

             

            /////////// RENDERER/////////////

             

             

            package action.datagrid
            {
            import mx.controls.Label;

             

             

             

            public class dataGridHeaderRenderer extends Label
            {

             

                import flash.events.MouseEvent;
                import mx.events.DataGridEvent;
                import mx.controls.DataGrid;
                import mx.controls.dataGridClasses.DataGridColumn;
                import mx.controls.dataGridClasses.DataGridListData;

             

                private var _data:DataGridColumn;
               
                //-----------------------------------------------
                public function dataGridHeaderRenderer()
                {
                    super();
                }
                //---------------------------------------------------
                override public function set data(value:Object):void
                {
                     _data = value as DataGridColumn;

             

                     text = DataGridListData(listData).label ;

             

                     //so we can center the Column Name vertically

                    //can pu this in contructor as well...
                     setStyle("paddingTop", 6 /* or compute this value*/);

            }

             

             

             


            }
            }