I have the following class that extends AdvancedDataGridItemRenderer:
package { import mx.controls.advancedDataGridClasses.AdvancedDataGridItemRenderer; public class TestADGIR extends AdvancedDataGridItemRenderer { public function TestADGIR() { super(); backgroundColor = 0; // black textColor = 0xFFFFFF //16777215; // white } } } As you can see, the backgroundColor gets set to black and the textColor gets set to white in the constructor. I have an AdvancedDataGrid that uses the TestADGIR for one of the columns. But when the grid displays, that column is rendered with black text on a white background – the exact opposite of what is being set in the constructor. Could somebody could help me understand what I’m doing wrong? Here is the code for the ADG:
<?xml version='1.0' encoding='utf-8'?> <mx:Application xmlns:mx='http://www.adobe.com/2006/mxml' layout='absolute' preinitialize='preInitApp()'> <mx:Script> <![CDATA[ import mx.collections.ArrayCollection; import mx.collections.HierarchicalCollectionView; import mx.collections.HierarchicalCollectionViewCursor; [Bindable] private var dpFlat:ArrayCollection = new ArrayCollection([ {Region:'North', DisplayOrder: 2, Territory:'North1', Territory_Rep:'North1_Rep', ParticipantDisplayOrder: 1, Actual:38865, Estimate:40000}, {Region:'North', DisplayOrder: 2, Territory:'North2', Territory_Rep:'North2_Rep', ParticipantDisplayOrder: 2, Actual:29885, Estimate:30000}, {Region:'North', DisplayOrder: 2, Territory:'North3', Territory_Rep:'North3_Rep', ParticipantDisplayOrder: 3, Actual:29134, Estimate:30000}, {Region:'North', DisplayOrder: 2, Territory:'North4', Territory_Rep:'North4_Rep', ParticipantDisplayOrder: 4, Actual:52888, Estimate:45000}, {Region:'North', DisplayOrder: 2, Territory:'North5', Territory_Rep:'North5_Rep', ParticipantDisplayOrder: 5, Actual:38805, Estimate:40000}, {Region:'North', DisplayOrder: 2, Territory:'North6', Territory_Rep:'North6_Rep', ParticipantDisplayOrder: 6, Actual:55498, Estimate:40000}, {Region:'North', DisplayOrder: 2, Territory:'North6', Territory_Rep:'North6_Rep', ParticipantDisplayOrder: 7, Actual:44985, Estimate:45000}, {Region:'North', DisplayOrder: 2, Territory:'North8', Territory_Rep:'North8_Rep', ParticipantDisplayOrder: 8, Actual:44913, Estimate:45000}, {Region:'South', DisplayOrder: 1, Territory:'South1', Territory_Rep:'South1_Rep', ParticipantDisplayOrder: 1, Actual:38865, Estimate:40000}, {Region:'South', DisplayOrder: 1, Territory:'South2', Territory_Rep:'South2_Rep', ParticipantDisplayOrder: 2, ParticipantDisplayOrder: 2, Actual:29885, Estimate:30000}, {Region:'South', DisplayOrder: 1, Territory:'South3', Territory_Rep:'South3_Rep', ParticipantDisplayOrder: 3, Actual:29134, Estimate:30000}, {Region:'South', DisplayOrder: 1, Territory:'South4', Territory_Rep:'South4_Rep', ParticipantDisplayOrder: 4, Actual:52888, Estimate:45000}, {Region:'South', DisplayOrder: 1, Territory:'South5', Territory_Rep:'South5_Rep', ParticipantDisplayOrder: 5, Actual:38805, Estimate:40000}, {Region:'South', DisplayOrder: 1, Territory:'South6', Territory_Rep:'South6_Rep', ParticipantDisplayOrder: 6, Actual:55498, Estimate:40000}, {Region:'South', DisplayOrder: 1, Territory:'South7', Territory_Rep:'South7_Rep', ParticipantDisplayOrder: 7, Actual:44985, Estimate:45000}, {Region:'South', DisplayOrder: 1, Territory:'South8', Territory_Rep:'South8_Rep', ParticipantDisplayOrder: 8, Actual:44913, Estimate:45000}]); [Bindable] private var itemRendererFactory:ClassFactory = null; private function preInitApp():void { itemRendererFactory = new ClassFactory(TestADGIR); //itemRendererFactory.properties = {backgroundColor: 0, textColor: 16777215 }; } private function sortByDisplayOrder(groupA:Object, groupB:Object, fields:Array = null):int { if (groupA.Region == groupB.Region) // if we are comparing two records from the same subgroup, then sort the participants { if (groupA.ParticipantDisplayOrder > groupB.ParticipantDisplayOrder) { return 1; } else if (groupA.ParticipantDisplayOrder == groupB.ParticipantDisplayOrder) { return 0; } else { return -1; } } if (groupA.DisplayOrder > groupB.DisplayOrder) // sort the subgroups { return 1; } else if (groupA.DisplayOrder == groupB.DisplayOrder) { return 0; } else { return -1; } } ]]> </mx:Script> <mx:VBox width='100%' height='100%'> <mx:Panel title='AdvancedDataGrid Control Example' height='100%' width='75%' layout='horizontal' paddingTop='10' paddingBottom='10' paddingLeft='10' paddingRight='10'> <mx:AdvancedDataGrid id='myADG' width='100%' height='100%' initialize='gc.refresh();' horizontalScrollPolicy='off' displayItemsExpanded='true' > <mx:dataProvider> <mx:GroupingCollection id='gc' source='{dpFlat}'> <mx:grouping> <mx:Grouping compareFunction='sortByDisplayOrder'> <mx:GroupingField name='Region'/> </mx:Grouping> </mx:grouping> </mx:GroupingCollection> </mx:dataProvider> <mx:columns> <mx:AdvancedDataGridColumn id='regionColumn' dataField='Region' itemRenderer='{itemRendererFactory}'/> <mx:AdvancedDataGridColumn id='territoryColumn' dataField='Territory'/> <mx:AdvancedDataGridColumn id='territoryRepColumn' dataField='Territory_Rep' headerText='Territory Rep'/> <mx:AdvancedDataGridColumn id='actualColumn' dataField='Actual'/> <mx:AdvancedDataGridColumn id='estimateColumn' dataField='Estimate'/> </mx:columns> </mx:AdvancedDataGrid> </mx:Panel> </mx:VBox> </mx:Application> Thanks! Sean
I discovered that the background color can be manipulated by setting the background property to true and then assigning a value to the backgroundColor property. The text color is manipulated by calling setStyle(‘color’, 0xFF0000). Thanks to Eric for pointing me in the right direction on the styles.