8 Replies Latest reply on Aug 1, 2011 6:54 AM by Carol L. Frampton

    Spark DataGrid alternatingRowColor

    tehxike1 Level 1

      How can I specify these in my skin (not by setting them on the grid itself)?  I've tried overriding the alternatingRowColorsBackground component, which doesn't work, and looks like a horrible hack in the process of not working:


      <fx:Component id="alternatingRowColorsBackground">
                  <s:Rect implements="spark.components.gridClasses.IGridVisualElement">
                              import spark.components.DataGrid;
                              import spark.components.Grid;
                              public function prepareGridVisualElement(grid:Grid, rowIndex:int, columnIndex:int):void
                                  const dataGrid:DataGrid = grid.dataGrid;
                                  if (!dataGrid)
                                  const colors:Array = [0xF8F8F8,0xEFF1F2];  //my colors
                                  rowBackgroundFillColor.color = colors[rowIndex % colors.length];
                          <s:SolidColor id="rowBackgroundFillColor" color="0xFFFFFF"/>

        • 1. Re: Spark DataGrid alternatingRowColor

          Hi, Whithin your itemrenderer you can use a formula with the itemIndex modulo 2 style  var v:Boolean = ((itemIndex % 2) == 0); You evaluate v in each itemrenderer (in the creationComplete handler for example), and style your component accordingly (v will alternate from true to false)  The other solution would be to use different itemrenderer alertatively in a similar way but one step above, in the list (or datagrid) by using the itemremdererFactoryFunction...  Hope it helps, Mich

          1 person found this helpful
          • 2. Re: Spark DataGrid alternatingRowColor
            tehxike1 Level 1

            Hey, thanks for the reply.  I know I can write a custom item renderer to do this, but it seems like a pretty common style that would be applied by a grid skin.  If there's no other way to do it, I'll just have to settle and write a custom renderer, but that sounds pretty ridiculous.

            • 3. Re: Spark DataGrid alternatingRowColor
              m1kal_ Level 2

              It doesn't sound to me so ridiculous... If each generic component has to fulfill a bunch of specific requirements, they wouldn't be generic anymore.... And the perfs would be a lot worst.... Is a what I like in the flex platform : simple and powerful concepts! Mich

              • 4. Re: Spark DataGrid alternatingRowColor
                tehxike1 Level 1

                I'd normally agree, but since alternatingRowColors is a specifiable style on the grid, I'd like to be able to adjust it in a skin, rather than having to either a) assign it manually to every grid I create, b) define it in CSS, or c) create a special item renderer simply to apply a background color.  It seems excessive in this scenario.    

                • 5. Re: Spark DataGrid alternatingRowColor
                  tehxike1 Level 1

                  Another issue I have with doing at the itemRenderer level is if I have a renderer used in two different places, I may now have to make two different versions of it for a stylistic reason.  I believe this is why ItemRenderers have the autoDrawBackground boolean- so they can allow their parent to do the drawing of their background.

                  • 6. Re: Spark DataGrid alternatingRowColor
                    Carol L. Frampton Level 2

                    Set the alternatingRowColors style which is an Array of colors and have an alternatingRowColorsBackground skin part defined (which is in the default DataGrid skin).


                            <s:DataGrid id="dataGrid" requestedRowCount="3" horizontalCenter="0" alternatingRowColors="[0xCCFFCC, 0xFFCCFF]">
                                    <s:DataItem key="1000" name="Abrasive" price="100.11" call="false"/>
                                    <s:DataItem key="1001" name="Brush" price="110.01" call="true"/>
                                    <s:DataItem key="1002" name="Clamp" price="120.02" call="false"/>
                                    <s:DataItem key="1003" name="Drill" price="130.03" call="true"/>
                                    <s:DataItem key="1004" name="Epoxy" price="140.04" call="false"/>
                                    <s:DataItem key="1005" name="File" price="150.05" call="true"/>
                                    <s:DataItem key="1006" name="Gouge" price="160.06" call="false"/>
                                    <s:DataItem key="1007" name="Hook" price="170.07" call="true"/>
                                    <s:DataItem key="1008" name="Ink" price="180.08" call="false"/>
                                    <s:DataItem key="1009" name="Jack" price="190.09" call="true"/>            

                    • 7. Re: Spark DataGrid alternatingRowColor
                      tehxike1 Level 1

                      Yes, but then the style is being declared at the component level.  Like I mentioned in a previous post, I want to be able to handle it entirely in a skin...so a skin will dictate the appearance/rendering of the component.

                      • 8. Re: Spark DataGrid alternatingRowColor
                        Carol L. Frampton Level 2

                        When the skin parts are loaded, if the "alternatingRowColors" style isn't an Array, grid.rowBackground is set to rowBackground.  If the style is an array grid.rowBackground is set to alternatingRowColorsBackground.


                        In your case you would need to do something like this


                        <s:DataGrid id="myDataGrid" ....

                            initialize="myDataGrid.grid.rowBackground = myDataGrid.alternatingRowColorsBackground">


                        although I would add code to check for null pointers since the alternatingRowColorsBackground skin part is optional.


                        and modify your skin


                                                    //const colors:Array = dataGrid.getStyle("alternatingRowColors");
                                                    const colors:Array = [0xCCFFCC, 0xFFCCFF];