Spark datagrid custom griditemeditor popup issue.

Question

I have  griditemrenderer and griditemeditor for a  spark datagrid column. As I have some functionality to be implemented in renderer and editor, I have created custom renderer and editor as follows;
MyEditor.as
<?xml version="1.0" encoding="utf-8"?>
<s:GridItemEditor xmlns:fx="http://ns.adobe.com/mxml/2009"
      xmlns:s="library://ns.adobe.com/flex/spark"
      xmlns:mx="library://ns.adobe.com/flex/mx"
      left="0" right="0" top="0" bottom="0" clipAndEnableScrolling="true"
      focusEnabled="true" focusIn="{re.setFocus()}" hasFocusableChildren="true">
<fx:Script>
  <![CDATA[
   override public function prepare():void{
    if(data!=null)
             re.text = data[column.dataField];
  ]]>
  </fx:Script>
<mx:HBox width="100%" height="100%">
   <s:RichEditableText id="re" width="100%" height="100%" editable="true">
   </s:RichEditableText>
</mx:HBox>
</s:GridItemEditor>
  MyRenderer.as
<?xml version="1.0" encoding="utf-8"?>
<s:GridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
     xmlns:s="library://ns.adobe.com/flex/spark"
     xmlns:mx="library://ns.adobe.com/flex/mx" clipAndEnableScrolling="true">
<fx:Script>
  <![CDATA[
   override public function prepare(hasBeenRecycled:Boolean):void{
    if(data!=null)
             rTxt.text = data[column.dataField];
  ]]>
  </fx:Script>
<s:RichText id="rTxt" left="7" top="7" >
   </s:RichText>
</s:GridItemRenderer>
Following datagrid uses these;
The problem is that when i am trying to edit the cell, the griditemeditor pops up above the griditemrenderer. I want that editor should come instead renderer place when editing cell, it should not popup. I can not use inline renderer and editor as i have lot of functionality in that.
Please let me know if any solution.
Thanks..

Answer 1

The datagrid code is as following;
<?xml version="1.0" encoding="utf-8"?>
<s:DataGrid xmlns:fx="http://ns.adobe.com/mxml/2009"
   xmlns:s="library://ns.adobe.com/flex/spark"
   xmlns:mx="library://ns.adobe.com/flex/mx"
   width="100%" height="100%" editable="true">
<s:columns>
  <s:ArrayCollection>
  <s:GridColumn dataField="name" editable="false"
        headerText="Name">
  </s:GridColumn>
  <s:GridColumn dataField="info" editable="true"
        headerText="Info"
        itemEditor="MyEditor"
        itemRenderer="MyRenderer">
  </s:GridColumn>
  </s:ArrayCollection>
</s:columns>
</s:DataGrid>
Please suggest if any solution.