[flexcomponents] datagrid behaving weirdly

[learner]

Hi all,

My scenarios is like this :
My *compDGcontainer  *component is a custom panel .. which get initialized
dynamically. whenevern some event is triggered in code..

for the first time when it get invoked...the init function of the item
renderer of the DG gets called twice..
for then on....if i try to add items to the dg by calling function
addDataToDG... scrollbar appears (which is very fine) ..but it displays the
wrong data.. and also....when i scroll it up and down.. the rows in datagrid
shifts up or down.....behaving very weired..
this is driving me nuts....can somebody please help

*compDGcontainer: *

<MinimizedPanelUtil .....
  creationComplete="init()" ...../>

  public function init():void{
     ......
     dgDataProvider.addItem(some_obj);
  }

*//  this function gets called on some event dispatcher..*
 public function addDataToDG():void{
    dgDataProvider.addItem(some_obj);
 }

  <mx:DataGrid id="dg" dataProvider="{dgDataProvider}"/>
   <mx:columns >
    <mx:DataGridColumn >
        <mx:itemRenderer>
                  <mx:Component>
                           * <message:messageBox/>  //  **custom component *
*used as a  **Item renderer *
                     </mx:Component>
         </mx:itemRenderer>
   </mx:DataGridColumn>
   </mx:columns>
  </mx:DataGrid>

<MinimizedPanelUtil >


*messageBox.mxml : *
<mx:Canvas   creationComplete="init()"  .../>

public function init():void{
    myData(data);  // initializing data
}