1 person found this helpful
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
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.
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
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.
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.
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"/>
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.
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];