Show ItemRenderer only when editing (onclick)

Question

I have a datagrid, that after the user has logged in becomes editable.
I would like that when the user clicks into a given field, say a date or number field, an itemRenderer that corresponds to the type of date appear.
Example: if i click into the date field, i get a datechooser, or a numericStepper when i click into a number based field.
Then after I click out of that field, it just shows the value, no longer the itemRenderer.
FYI, I am using Pure MVC, so this logic is in a mediator '.as' class.
Please help.

Answer 1

I am getting the itemEditor to work mostly now.
problem i am having is, after i switch the datagrid to become editable and then click into a given field (ie: itemEditor as a numeric stepper), if i just click in and out of the field, but do not make any changes to it, the data in the field either becomes "NaN" (in the case of a numeric stepper editor) or just blank (in the case of a combo box editor)
Here is my code:
DataGrid.mxml
<?xml version="1.0" encoding="utf-8"?>
<!--
PureMVC AS3 Demo - Flex Application Skeleton
Copyright (c) 2007 Daniele Ugoletti <[email protected]>
Your reuse is governed by the Creative Commons Attribution 3.0 License
-->
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns="*"
width="100%" height="100%">
<mx:Script>
  <![CDATA[
  import com.*;
  import flash.events.Event;
  import mx.controls.DataGrid;
  import mx.controls.dataGridClasses.DataGridColumn;
  import mx.controls.Alert;
  import flash.net.URLRequest;
  import mx.controls.NumericStepper;
  import mx.controls.DateChooser;
  import mx.controls.CheckBox;
  import mx.controls.ComboBox;
  public static const CREATION_COMPLETE: String = "myCreationComplete";
  public static const LOAD_SETTINGS: String = "load settings";
  private function dateFormat(item:Object, column:DataGridColumn):String
  return df.format(item.date);
  public function onLinkBtnClick(request:URLRequest):void
  //trace("urlRequest: "+request)
  try {
    navigateToURL(request);
  }catch (e:Error) {
    // UNFORTUNATELY, THE ERROR IS THRU INTERNET EXPLORER AND IS NOT CAUGHT HERE
    trace("error: " + e)
    Alert.show("There was an error in opening the requested file!")
  }]]>
</mx:Script>
<mx:DateFormatter id="df" formatString="MM/DD/YY"/>
<mx:VBox width="100%" height="100%" verticalGap="0" >
  <mx:HBox id="cbHBox" width="100%" height="0" fontWeight="bold" horizontalAlign="right" visible="false" >
  <mx:CheckBox id="selectAllCB" label="Select All / None" labelPlacement="left" fontWeight="bold" color="0xFFFFFF" />
  <mx:Spacer width="{colSelected.width/2 + 2}" />
  </mx:HBox>
  <mx:DataGrid id="settingsDataGrid"
  height="100%" width="100%"
  editable="false"
  horizontalScrollPolicy="off">
  <mx:columns>
    <mx:DataGridColumn width="24" headerText="Number" dataField="number" resizable="false"/>
    <mx:DataGridColumn width="120" headerText="Title" dataField="title" />
    <mx:DataGridColumn width="20" headerText="Date" dataField="date" labelFunction="dateFormat" editorDataField="dfDate" itemEditor="com.view.itemRenderers.DGDateFieldEditor"  resizable="false" />
    <mx:DataGridColumn width="12" headerText="Book" dataField="book" editorDataField="nsBook" itemEditor="com.view.itemRenderers.DGNumericStepperEditor" resizable="false" />
    <mx:DataGridColumn id="colType" width="14" headerText="Type" dataField="type" editorDataField="cbType" itemEditor="com.view.itemRenderers.DGTypeComboBoxEditor" resizable="false" />
    <mx:DataGridColumn width="10" textAlign="center" headerText="Link" sortable="false" draggable="false" resizable="false"
    dataField="link" itemRenderer="com.view.itemRenderers.DGLinkButtonEditor"
    rendererIsEditor="true" editable="false"/>
    <!--<mx:DataGridColumn id="colSelected" width="46" headerText="Select" visible="false" editable="false" itemRenderer="{CheckBoxRenderer}"  editorDataField="selected" />-->
    <mx:DataGridColumn id="colSelected" width="46" textAlign="center" visible="false" sortable="false" draggable="false" resizable="false"
    headerText="Select" dataField="sel" itemRenderer="com.view.itemRenderers.DGCheckBoxEditor"
    rendererIsEditor="true" editorDataField="cbSelected"/>
  </mx:columns>
  </mx:DataGrid>
</mx:VBox>
</mx:Canvas>
DGNumericStepperEditor.mxml
 <?xml version="1.0"?>
<!-- itemRenderers\dataGrid\myComponents\EditorDGCheckBox.mxml -->
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
implements="mx.controls.listClasses.IDropInListItemRenderer,mx.managers.IFocusManagerComp onent"
horizontalAlign="center" verticalAlign="middle">
    <mx:Script>
        <![CDATA[
         import mx.controls.listClasses.ListData;
   import mx.controls.dataGridClasses.DataGridListData;
   import mx.controls.listClasses.BaseListData;
   import mx.controls.dataGridClasses.DataGridItemRenderer
   import mx.events.FlexEvent;
   import mx.controls.Alert
   private var _listData:DataGridListData;         
            // Define a property for returning the new value to the cell.
            public var nsBook:Number;           
            // Implement the drawFocus() method for the VBox.
            override public function drawFocus(draw:Boolean):void {
    bookNS.setFocus();
   [Bindable]
   override public function set data(value:Object):void{
    super.data = value;
    bookNS.value = data[_listData.dataField];
   override public function get data():Object {
    return super.data;
      public function get listData():BaseListData
    return _listData;
   public function set listData(value:BaseListData):void
    _listData = DataGridListData(value);
        ]]>
    </mx:Script>
<mx:NumericStepper id="bookNS" horizontalCenter="center" maximum="18" width="100%"
        click="nsBook = bookNS.value" />
</mx:VBox>
PLEASE HELP, getting these itemRenderers and itemEditors to work properly is DRIVING ME CRAZY!!!