I seem to be missing some key concept(s) when it comes to flex itemrenderers, particularly as it applies to an AdvancedDataGrid. I'm doing what a lot of other people are trying to do: change the bg color of a field based on data from the row. My problem seems to be in accessing data fields? Basically, when this loads, nothing appears. If I remove the parts from the renderer where I try to access field data, it works, but kind of defeats the purpose.
Here's what I've got:
<mx:AdvancedDataGrid width="100%" height="100%"
id="topAccountsGrid"
borderStyle="solid" dropShadowEnabled="true" treeColumn="{list_name}" editable="false" selectionMode="singleRow"
dragEnabled="true" dropEnabled="true" dragMoveEnabled="true" dragDrop="topAccountsGrid_dragDropHandler(event)"
doubleClickEnabled="true" itemDoubleClick="topAccountsGrid_itemDoubleClickHandler(event)"
sort="topAccountsGrid_sortHandler(event)" backgroundColor="#ffffff">
<mx:dataProvider>
<mx:HierarchicalData source="{filteredList}"
childrenField="children" />
</mx:dataProvider>
<mx:columns>
<mx:AdvancedDataGridColumn id="colRank" headerText="Rank" dataField="Rank__c" width="60">
<mx:itemRenderer>
<fx:Component>
<mx:HBox paddingLeft="2">
<s:Label id="tempLabel" text="{data.Rank__c}" />
<fx:Script>
<![CDATA[
override public function set data(value:Object) : void{
super.data = value;
if(data.Health__c == 0){
setStyle("backgroundColor",0xFF5050);
} else if(data.Health__c == 50){
setStyle("backgroundColor",0xFFFF99);
} else if(data.Health__c == 100){
setStyle("backgroundColor",0x66FF66);
}
}
]]>
</fx:Script>
</mx:HBox>
</fx:Component>
</mx:itemRenderer>
</mx:AdvancedDataGridColumn>
<mx:AdvancedDataGridColumn id="list_name" headerText="Name" dataField="Name" />
<mx:AdvancedDataGridColumn id="colPrevRank" headerText="Previous Rank" dataField="Previous_Rank__c" />
<mx:AdvancedDataGridColumn id="colType" headerText="Type" dataField="Type" />
<mx:AdvancedDataGridColumn id="colContacts" headerText="# Contacts" dataField="Contacts__c" />
<mx:AdvancedDataGridColumn id="colDeals" headerText="# Deals" dataField="Deals__c" />
</mx:columns>
</mx:AdvancedDataGrid>
Best Answer
I've had a similar issue in the past when using
HierarchicalData
. The way I got around it was to use anAdvancedDataGridRendererProvider
.Here's some sample code:
And the AdvancedDataGridRendererProvider: