5 Replies Latest reply on Mar 3, 2010 8:48 PM by kkc_mca

    How to set the DataGrid header text at center?

    kkc_mca Level 2

      Hi All,

       

      when set textAlign property to center It is aligning both the header and column text to center

       

      Is there any to align headerText at center and columns text align to left.

       

      thanks in advance

      kkc


        • 1. Re: How to set the DataGrid header text at center?
          Francisc Level 3

          In the DataGrid header CSS style add text-align: left/center/right.

          • 2. Re: How to set the DataGrid header text at center?
            kkc_mca Level 2

            It is aligning both the header text and column text

            I already tried using that property

            • 3. Re: How to set the DataGrid header text at center?
              Matt Le Fevre Level 4

              kkc_mca wrote:

               

              Hi All,

               

              when set textAlign property to center It is aligning both the header and column text to center

               

              Is there any to align headerText at center and columns text align to left.

               

              thanks in advance

              kkc


               

              you'll have to make your own item renderer for the dataGrid.

               

              eg:

               

              main App:

               

              <?xml version="1.0" encoding="utf-8"?>
              <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
              
                  <mx:Script>
                      <![CDATA[
                          
                          [Bindable]
                          public var blah:Array = ["1","2","3","4"];
                          
                      ]]>
                  </mx:Script>
              
                  <mx:DataGrid x="136" y="147" dataProvider="{blah}" width="335" height="358">
                      <mx:columns>
                          <mx:DataGridColumn headerText="Column 1" textAlign="center" itemRenderer="testRend"/>
                      </mx:columns>
                  </mx:DataGrid>
                  
              </mx:Application>
              

               

               

              testRand.mxml

               

              <?xml version="1.0" encoding="utf-8"?>
              <mx:Label xmlns:mx="http://www.adobe.com/2006/mxml" text="testText" textAlign="left">
                  
              </mx:Label>
              
              

               

               

              will give you:

               

              columns.JPG

               

               

              if you don't have your own custom item renderer, the column text adopts its parent's property by default, hence why you're getting them both aligned centrally.

              • 4. Re: How to set the DataGrid header text at center?
                Francisc Level 3

                It does work and you don't need to implement a custom itemRenderer for this:

                 

                    <mx:Style>
                        DataGrid

                        {
                            headerStyleName:dataGridHeaderStyle;
                        }

                        .dataGridHeaderStyle

                        {
                            fontWeight:bold;
                            textAlign:right;
                        }
                    </mx:Style>

                • 5. Re: How to set the DataGrid header text at center?
                  kkc_mca Level 2

                  its working fine

                  Thanks again