4 Replies Latest reply on Mar 27, 2013 1:16 PM by ictoamids

    Spark Datagrid - center a column?

    Daniel Pride Level 1

      Started using the spark datagrid and was a little taken aback when centering a column in the grid turned into a google search

      eh?

      Its such a simple thing... whatever happened to textalign="center"

      ??

        • 1. Re: Spark Datagrid - center a column?
          kevinklin Adobe Employee

          We don't support styles on a GridColumn anymore. You should set the text style on the item renderer factory for the column:

           

          <s:DataGrid>
          ...
              <s:columns>
                  <s:ArrayList>
                      <s:GridColumn id="Col3" dataField="price" headerText="PRICE">
                          <s:itemRenderer>
                              <fx:Component>
                                  <s:DefaultGridItemRenderer textAlign="center" />
                              </fx:Component>
                          </s:itemRenderer>
                      </s:GridColumn>
                      ...
                  </s:ArrayList>
              </s:columns>
          ...
          </s:DataGrid>
          

           

           

          -Kevin

          • 2. Re: Spark Datagrid - center a column?
            Daniel Pride Level 1

            Absurdly cumbersome and wordy just to set text alignment.

            But Thanks, I am not fond of it but it solved the problem.

            and I gave you your due

            • 3. Re: Spark Datagrid - center a column?
              Think_Think

              crate DataGrid Skin

               

              original

               

              <fx:Component id="headerRenderer">

                  <s:DefaultGridHeaderRenderer/>

              </s:DefaultGridHeaderRenderer>

               

              now

               

              <fx:Component id="headerRenderer">

                 <s:DefaultGridHeaderRenderer textAlign="right">

                  <s:Rect left="0" right="0" bottom="0" top="0" height="100%"  alpha="0.2" x="5" y="5">

                   <s:fill>

                    <s:LinearGradient rotation="90">

                     <s:GradientEntry color="0xff0000" alpha="0.2"/>

                     <s:GradientEntry color="0xff0000" alpha="0.4"/>

                    </s:LinearGradient>

                   </s:fill>

                   <s:filters>

                   </s:filters>

                  </s:Rect>

                  <s:HGroup left="7" right="7" top="5" bottom="5" gap="2" width="100%" height="100%" verticalAlign="middle">

                   <s:Group id="labelDisplayGroup" width="100%">

                    <s:Label id="labelDisplay"

                       verticalCenter="1" left="0" right="0" top="0" bottom="0"

                       textAlign="center"

                       fontWeight="bold"

                       verticalAlign="middle"

                       maxDisplayedLines="1"

                       showTruncationTip="true"/>

                   </s:Group>

                   <s:Group id="sortIndicatorGroup" includeInLayout="false"/>

                  </s:HGroup>

                 </s:DefaultGridHeaderRenderer>

               

              My English is not so good

              The answer isn't know you full not satisfied

              • 4. Re: Spark Datagrid - center a column?
                ictoamids

                Simplest way I've found...

                 

                <s:DataGrid> ...    

                     <s:columns>        

                          <s:ArrayList>            

                               <s:GridColumn id="Col3" dataField="price" headerText="PRICE">                

                                    <s:itemRenderer>                    

                                         <fx:Component>                        

                                              <s:GridItemRenderer>

                                                    <s:layout>

                                                        <s:HorizontalLayout horizontalAlign="center"/>

                                                   </s:layout>

                                              </s:GridItemRenderer>                   

                                         </fx:Component>                

                                    </s:itemRenderer>          

                               </s:GridColumn> ...        

                          </s:ArrayList>    

                     </s:columns> ...

                </s:DataGrid>