dataGrid with itemEditor with DropDownList error

[Guest]

I keep getting this error   TypeError: Error #1034: Type Coercion failed: cannot convert  views::EmployeesNonAvailsInnerClass2@3717c29 to  mx.controls.listClasses.IListItemRenderer.  When I select the column  which the dropdownList is suppose to display.  I am using a custom  component which I included the code below.  I am new to Flex and so what  I have so far came out of the book Flex 4 Bible.  My data is coming  from a webservice and returns an array of class ReasonDto and I am  saving the results to a s:ArrayCollection.  I sorta had it working  before the custom dropdownlist when I used mx controls but I keep  getting this when I use s controls.  Any suggestions?

package components
{
  import mx.events.FlexEvent;
 
  import spark.components.DropDownList;
 
  public class SelectableDropDown extends DropDownList
  {
    public var selectField:String = "";
    public var selectFieldValue:* = null;
   
    public function SelectableDropDown()
    {
      super();
      this.addEventListener(FlexEvent.CREATION_COMPLETE, creationCompleteHandler);
    }
    private function creationCompleteHandler(event:FlexEvent):void
    {
      updateSelection();
    }
    public function updateSelection():void
    {
      if (selectField != "" && selectFieldValue != null && dataProvider != null)
      {
        var dataObj:Object;
        for (var i:Number=0; i<dataProvider.length; i++)
        {
          dataObj = dataProvider.getItemAt(i);
          if (dataObj[selectField] == selectFieldValue)
          {
            selectedIndex = i;
            break;
          }
        }
      }
    }
  }
}

Here is the code which calls the component

            <mx:DataGridColumn headerText="Reason" width="100" dataField="reason.reason" editable="true"
                               editorDataField="selectedItem">
                <mx:itemEditor>
                    <fx:Component>
                        <components:SelectableDropDown prompt="Select a Reason"
                                         dataProvider="{parentDocument.reasonsDP}"
                                         labelField="reason.reason"
                                         selectField="reason"
                                         selectFieldValue="reason.reason"/>
                    </fx:Component>
                </mx:itemEditor>
            </mx:DataGridColumn>

[Guest]

The answer was to just add the canvas and that solved it. Still having issues but this is the solution to this problem

Here is my current code now

            <mx:DataGridColumn headerText="Reason" width="100" dataField="reason.reason" editable="true"
                               editorDataField="selectedItem">
                <mx:itemEditor>
                    <fx:Component>
                        <mx:Canvas>
                            <fx:Script>
                                <![CDATA[
                                    import mx.collections.ArrayCollection;
                                    import mx.rpc.events.ResultEvent;
                                    import mx.events.FlexEvent;
                                    import mx.controls.Alert;
                                   
                                    [Bindable]
                                    public var reasonsDP:ArrayCollection;
                                   
                                    protected function sdd_creationCompleteHandler(event:FlexEvent):void
                                    {
                                        getReasonsResult.token = personnelBean.getReasons();
                                    }
                                   
                                    public function get selectedItem():ReasonDto
                                    {
                                        return selectableDropDown.selectedItem;
                                    }
                                   
                                    public function get prompt():ReasonDto
                                    {
                                        return selectableDropDown.selectedItem.reason;
                                    }
                                   
<!--                                    public override function setFocus():void
                                    {
                                        selectableDropDown.setFocus();
                                    }
-->                                   
                                    protected function getReasonsResult_resultHandler(event:ResultEvent):void
                                    {
                                        reasonsDP = getReasonsResult.lastResult;
                                    }
                                   
                                ]]>
                            </fx:Script>
                            <fx:Declarations>
                                <personnelbean:PersonnelBean id="personnelBean" fault="Alert.show(event.fault.faultString + '\n' + event.fault.faultDetail)" showBusyCursor="true"/>
                                <s:CallResponder id="getReasonsResult" result="getReasonsResult_resultHandler(event)"/>
                                <valueObjects:ReasonDto id="reasonDto"/>
                                <!-- Place non-visual elements (e.g., services, value objects) here -->
                            </fx:Declarations>
                            <components:SelectableDropDown id="selectableDropDown"
                                             dataProvider="{reasonsDP}"
                                             labelField="reason"
                                             selectField="reason"
                                             selectFieldValue="reason"
                                             creationComplete="sdd_creationCompleteHandler(event)"/>
                        </mx:Canvas>
                    </fx:Component>
                </mx:itemEditor>
            </mx:DataGridColumn>

[Guest]

See my second post to this question