How to use the datagrid scope variable out of an ItemRenderer?

advertisements

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>


If someComponentVariable is a public property of the class enclosing DataGrid, you 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