How to use out-of-datagrid scope variable inside an ItemRenderer?

Question

I'm binding an array of items to a data grid using ItemRenderer. I use the data variable to control the bindable data. I also have someComponentVariable that need be inserted into every row but its declared at the component scope, so the data grid doesn't seem to reconize it (compile error).

How can I use this variable (someComponentVariable) inside the ItemRenderer?

Code Example

<mx:DataGrid id="userBonusesGrid" width="100" height="248" showHeaders="false" wordWrap="true">
 <mx:columns>
  <mx:DataGridColumn headerText="" width="36">
   <mx:itemRenderer>
    <mx:Component>
     <mx:VBox verticalAlign="middle" horizontalAlign="center">
      <ns1:SidePanelBonus 
       bonusName="{data.name}" description="{data.description}" 
       arrow="{someComponentVariable}">
      </ns1:SidePanelBonus> 
     </mx:VBox>
    </mx:Component>
   </mx:itemRenderer>
  </mx:DataGridColumn>
 </mx:columns>
</mx:DataGrid>

Answer 1

No you can not use it at all. Each itemRenderer in data grid can only access the item for which the renderer was created. And this is done purposely because itemRendrers change dynamically, they are not bound for data forever, when you scroll, the items get scrolled not the renderers, they remain in same position or they might change, but corresponding item renderer's data always changes when you scroll. They dont share one to one relationship.

The only solution is to pass the data in the item in the form of some parent child relationship.

Answer 2

If someComponentVariable is a public property of the class enclosing DataGrid, u can use outerDocument to access it from a component.

<ns1:SidePanelBonus bonusName="{data.name}" description="{data.description}" 
    arrow="{outerDocument.someComponentVariable}">
</ns1:SidePanelBonus>

See the "using the Component tag" section in Creating inline item renderers and editors for more info about outerDocument