How to access MXML component instance in ItemRenderer

Question

I have been developing an Adobe Flex (v3.5 Flex SDK) based application and I have a question on How we can access (call) a method written in MXML file (embeded in script tag) from the ItemRenderer file.

The MXML component has a datagrid and for one of the columns, the itemrenderer is my own custom item renderer.

In my custom item renderer, for some event I need to call a method which exist in its parent MXML component. How do we get access to its parent MXML instance ?

I have explored for this in google and found that we can access to 'data' object which refers to the dataProvider of the datagrid. But I wanted access to the instance of MXML component (so that I can call a method in it) which has the datagrid.

The AdvancedDataGridColumn in AdvancedDataGrid is like this

<mx:AdvancedDataGridColumn dataField="total" headerText="Total" width="120" itemRenderer="renderers.MyItemRenderer"/>

Here MyItemRenderer is a separate action script file.

Appreciate the response.

Thanks

Raagu

Are you using an inner MXML component as item renderer in your MXML component with your datagrid? — zenbeni
You can dispatch a custom event on the AdvancedDataGrid from the item renderer and listening to it. Personally I don't like having too much logic in my item renderers: they are just renderers not components. That way you can easily re-use your item renderers in other cases (and not implementing a fork because the behaviour is not the same). — zenbeni
Ok. Got your point. Can I also use like this ? In listData(value:BaseListData) method in ItemRenderer, AdvancedDataGridListData(value).owner.owner ? The first owner refers to AdvancedDataGrid and its owner refers to MXML component ? — Raghavendra Nilekani

Panciz Panciz · Accepted Answer · 2014-04-03T15:43:15

As Raghavendra Nilekani suggested This works:

TestGrid.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
    <fx:Script>
        <![CDATA[
            [Bindable]
            public var data:Array  = [
                {name:"name",value:"valeu1",timestamp:"423423"},
                {name:"name1",value:"valeu2",timestamp:"423423"},
                {name:"name2",value:"valeu3",timestamp:"423423"},
                {name:"name3",value:"valeu5",timestamp:"423423"}
            ]

            public function calculateValue():Number{
                return Math.random();
            }   
        ]]>
    </fx:Script>
    <fx:Declarations>

    </fx:Declarations>
        <mx:VBox height="100%" width="100%">
            <mx:AdvancedDataGrid dataProvider="{data}">
                <mx:columns>
                    <mx:AdvancedDataGridColumn itemRenderer="ItemRenderer">

                    </mx:AdvancedDataGridColumn>
                </mx:columns>
            </mx:AdvancedDataGrid>

        </mx:VBox>
</s:Application>

e ItemRendere.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:MXAdvancedDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                                  xmlns:s="library://ns.adobe.com/flex/spark" 
                                  xmlns:mx="library://ns.adobe.com/flex/mx" 
                                  focusEnabled="true"
                                  addedToStage="mxadvanceddatagriditemrenderer1_addedToStageHandler(event)"
                                  >

    <fx:Script>
        <![CDATA[
            [Bindable]
            var value:Number;
            import mx.containers.VBox;
            import mx.controls.AdvancedDataGrid;
            protected function mxadvanceddatagriditemrenderer1_addedToStageHandler(event:Event):void
            {
                var grid:AdvancedDataGrid = ((AdvancedDataGrid)(this.owner));
                var box:VBox =  ((VBox)(grid.owner))        
                    var comp:TestGrid  = (TestGrid)(box.owner);
                    value = comp.calculateValue();
            }
        ]]>
    </fx:Script>


    <s:Label id="lblData" top="0" left="0" right="0" bottom="0" text="{value}" />
</s:MXAdvancedDataGridItemRenderer>

Anyway I agree with zenbeni that this lead to a not reausable item renderer.

How to access MXML component instance in ItemRenderer

1 Answers