[flexcoders] DataGrid CustomItemRenderer Issue

[sunny ladkani]

Hi All,

I have a datagrid which has customItemRenderer. In the itemRenderer I have a
button which onClick adds a child label to the itemRenderer.
Now,in the application, when I click on an item's button a label is added to
it. Then I scoll down and (don't know why?) find this label added at random
itemRenderers.

*Here is the sample application:-*
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"; layout="absolute"
xmlns:local="*" creationComplete="onCreationComplete(event)" >
<mx:Script>
    <![CDATA[
        import mx.collections.ArrayCollection;

        [Bindable]
        private var arr:ArrayCollection = new ArrayCollection();

        private function onCreationComplete(e:Event):void
        {
            for(var i:int = 0;i<100;i++)
            {
                arr.addItem({text:i.toString()});
            }
        }
    ]]>
</mx:Script>

<mx:DataGrid dataProvider="{arr}" id="dg" width="300" height="100%"
showHeaders="false" >
    <mx:itemRenderer>
        <mx:Component>
            <local:DGItemRenderer/>
        </mx:Component>
    </mx:itemRenderer>

</mx:DataGrid>
</mx:Application>

*Here is the itemRenderer:-*
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"; height="100%"
width="100%">
<mx:Script>
    <![CDATA[
        import mx.controls.Label;

        private var newText:Label = new Label();
        private var added:Boolean = false;

        private function onClick(e:Event):void
        {
            if(!data.added)
            {
                newText.text = "Child "+txt.text+" added";
                hBox.addChild(newText);
            }
            else
            {
                hBox.removeChild(newText);
            }
        }

        override public function set data(value:Object):void
        {
            super.data = value;
            if(value)
            {
                txt.text = value.text;
            }
        }
    ]]>
</mx:Script>
    <mx:HBox id="hBox">
        <mx:Button label="clickMe" click="onClick(event)" />
        <mx:Text id="txt" />
    </mx:HBox>

</mx:Canvas>

Please help finding me the problem.

Thanks and Regards,
Sunny Ladkani