Flex, AdvancedDataGrid, custom itemrenderer

Question

I don't seem to have any key concept when it comes to flex itemrenderers, especially with regard to the AdvancedDataGrid application. I do what other people try to do: change the color of the bg field based on the data from the row. My problem is accessing data fields? Basically, when it loads, nothing appears. If I remove parts from the renderer where I try to access the field data, it works, but it seems to hit the target.

Here is what I have:

<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> 

Answer 1

I had a similar problem in the past when using HierarchicalData . The way I got around was using AdvancedDataGridRendererProvider .

Here is a sample code:

 <mx:AdvancedDataGrid width="100%" height="100%" id="topAccountsGrid" 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: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:rendererProviders> <mx:AdvancedDataGridRendererProvider column="{colRank}" depth="1" dataField="Rank__c" renderer="AdvancedDataGridRankCRenderer" /> </mx:rendererProviders> </mx:AdvancedDataGrid> 

And AdvancedDataGridRendererProvider:

 <?xml version="1.0" encoding="utf-8"?> <mx:HBox xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" backgroundColor="{SetBackgroundColor(data)}" paddingLeft="2" paddingRight="2" paddingTop="2" horizontalScrollPolicy="off" verticalScrollPolicy="off" height="22"> <fx:Script> <![CDATA[ [Bindable] private var bgColor:uint = 0xD6E5FF; private function SetBackgroundColor(obj:Object):uint { var returnColor:uint = 0xFF5050; if (obj["Rank__c"] != null) { switch (obj["Rank__c"].toString().toUpperCase()) { case "0": returnColor = 0xFF5050; break; case "50": returnColor = 0xFFFF99; break; case "100": returnColor = 0x66FF66; break; default: returnColor = 0xFF5050; break; } } return returnColor; } override public function set data(value:Object):void { super.data = value; rankLabel.text = value["Rank__c"].toString(); validateDisplayList(); } ]]> </fx:Script> <mx:Label id="rankLabel" /> </mx:HBox>