Edit mode not showing up in DataGrid

Question

I have the following DataGrid. The problem is that the ItemRenderer show corretly but ItemEditor does not. (below I've copied code for my DataGrid MXML, my ItemRenderer component (TimeRenderer)  and ItemRenderer component (TimeEditor)
DataGrid
<mx:DataGrid id="grdSiteHours" dataProvider="{model.ModelLocator.getInstance().storeHours}" width="
100%" height="90%" editable="true">
<mx:columns>
<mx:DataGridColumn id="clmDay" headerText="Day"dataField="
day" editable="false" />
<mx:DataGridColumn id="clmOpenTime" headerText="Open Time"dataField="
openTime" editable="true"itemRenderer="
components.TimeRenderer" itemEditor="
components.TimeEditor" editorDataField="time"width="
200" />
<mx:DataGridColumn id="clmCloseTime" headerText="Close Time"dataField="
closeTime" editable="true"itemRenderer="
components.TimeRenderer" itemEditor="
components.TimeEditor" editorDataField="time"width="
200" />
</mx:columns>
</mx:DataGrid>
ItemRenderer
<mx:HBox  xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="30">
 <mx:Script>
<![CDATA[
 import view.valueobjects.TimeData; 
Bindable] 
protected var _data:Object; 
Bindable] 
protected var time:TimeData; 
override public function get data():Object{
return this._data;}
override public function set data(value:Object):void{
super.data = value; 
this.time = value.openTime as TimeData;}
]]>
</mx:Script>
 <mx:Label id="lblTimeDisplay" text='
{this.time.hour.toString() + ":" + 
this.time.min.toString() + " " +(
this.time.am == true ? "AM" : "PM")}' />
 </mx:HBox>
Item Editor
<mx:HBox  xmlns:mx="http://www.adobe.com/2006/mxml" height="30">
 <mx:Script>
<![CDATA[
 import view.valueobjects.TimeData; 
Bindable] 
protected var _data:Object; 
Bindable] 
public var time:TimeData; 
override public function get data():Object{
return this._data;}
override public function set data(value:Object):void{
if(value != null){
super.data = value; 
this.time = value.openTime as TimeData;}
protected function updateTime():void{
this.time.hour = Number(this.cmbOpenTimeHourSelector.selectedItem); 
this.time.min = Number(this.cmbOpenTimeMinSelector.selectedItem); 
this.time.am = this.radgrpOpenTimeAMPM.selectedValue == "AM" ? true : false;}
]]>
</mx:Script>
 <mx:ComboBox id="cmbOpenTimeHourSelector" change="updateTime()"editable="
false">
 <mx:ArrayCollection>
 <mx:String>01</mx:String>
 <mx:String>02</mx:String>
 <mx:String>03</mx:String>
 <mx:String>04</mx:String>
 <mx:String>05</mx:String>
 <mx:String>06</mx:String>
 <mx:String>07</mx:String>
 <mx:String>08</mx:String>
 <mx:String>09</mx:String>
 <mx:String>10</mx:String>
 <mx:String>11</mx:String>
 <mx:String>12</mx:String>
 </mx:ArrayCollection>
 </mx:ComboBox>
 <mx:ComboBox id="cmbOpenTimeMinSelector" change="updateTime()"editable="
false">
 <mx:ArrayCollection>
 <mx:String>00</mx:String>
 <mx:String>15</mx:String>
 <mx:String>30</mx:String>
 <mx:String>45</mx:String>
 </mx:ArrayCollection>
 </mx:ComboBox>
 <mx:RadioButtonGroup id="radgrpOpenTimeAMPM" change="updateTime()" />
 <mx:RadioButton id="radOpenTimeAM" groupName="radgrpOpenTimeAMPM"label="
AM" value="AM" />
 <mx:RadioButton id="radOpenTimePM" groupName="radgrpOpenTimeAMPM"label="
PM" value="PM" /></mx:HBox>

Answer 1

Doesn't work even after implementing the interface.
The annoying thing is that when I hover mouse over other grid columns, it shows highlights on the rows but doesn't eeven highlight any row when I hover mouse through the custom-rendered column.
I previously used ItemEditor in a DataGridColumn which had just a ComboBox in one of my previous projects and it worked just fine. Am I missing something over here?