flex itemrenderer prevents datagrid item select - apache-flex

Question

I'm somewhat new to Flex and have encountered a problem with itemRenderer that I can't find the solution to. I've asked a coworker with plenty of flex experience, and I've tried searching the internet with no luck.
My problem is that I have a dataGrid in which each column uses an itemRenderer to display information, and for some reason this causes the user to be unable to select any of the dataGrid rows. I think it must have something to do with itemRenderer, because when I added a dummy column without an itemRenderer, I was able to highlight and select a row by clicking on that dummy column, but the others still did not work. I've tried comparing my code with code for other dataGrids with itemRenderers that do work, but I haven't been able to find any differences that would cause the problem that mine is giving me. Does anyone know why this would happen?
Thank you!
My dataGrid (I tried to only include what I think should be relevant just to keep things concise. If anyone thinks more information is needed, please let me know!):
<mx:DataGrid id="servicegridUI" left="10" right="10" top="10" bottom="85" selectable="true"
styleName="formDataGrid" variableRowHeight="true" toolTip="Double-click to view.">
<mx:columns>
<mx:DataGridColumn headerText="ID" dataField="ID" width="175">
<mx:itemRenderer>
<mx:Component>
<mx:HBox paddingBottom="3" height="70" paddingLeft="5" horizontalGap="1" paddingTop="2" horizontalScrollPolicy="off" verticalScrollPolicy="off">
<mx:Text height="100%" width="100%" id="id" htmlText="" selectable="true" doubleClick="openDoc(event)" doubleClickEnabled="true"/>
<mx:Script>
<![CDATA[
var refId:String = "";
override public function set data(value:Object):void {
//variables for setting text are created here
id.htmlText = 'ID: ' + refId + '<br><font color="#666666">Service ID: ' + servId + '</font>';
id.htmlText +='<br><font color="#666666">Type and Specialty: ' + type + ' - ' + specialty + '</font>';
}
public function openDoc(event:MouseEvent):void {
//removed due to irrelevance
}
]]>
</mx:Script>
</mx:HBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn headerText="Claimant" dataField="claimantHeader" width="125">
<mx:itemRenderer>
<mx:Component>
<mx:HBox paddingBottom="3" height="70" paddingLeft="5" horizontalGap="1" paddingTop="2" horizontalScrollPolicy="off" verticalScrollPolicy="off">
<mx:Text height="100%" width="100%" id="claimant" htmlText="" selectable="true" doubleClick="openDoc(event)" doubleClickEnabled="true"/>
<mx:Script>
<![CDATA[
var refId:String = "";
override public function set data(value:Object):void {
//variables for setting text are created here
claimant.htmlText = 'Claim: ' + claim + '<br><font color="#666666">Name: '+ name +'</font>';
claimant.htmlText +='<br><font color="#666666">Date: '+ date+'</font>';
}
// Opens a new browser window and loads the file
public function openDoc(event:MouseEvent):void {
//removed due to irrelevance
}
]]>
</mx:Script>
</mx:HBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn headerText="Status" dataField="statusHeader" width="70">
<mx:itemRenderer>
<mx:Component>
<mx:HBox paddingBottom="3" height="70" paddingLeft="5" horizontalGap="1" paddingTop="2" horizontalScrollPolicy="off" verticalScrollPolicy="off" >
<mx:Text height="100%" width="100%" id="status" htmlText="" selectable="true" doubleClick="openDoc(event)" doubleClickEnabled="true"/>
<mx:Script>
<![CDATA[
var refId:String = "";
override public function set data(value:Object):void {
//variables for setting text are created here
status.htmlText = 'Date: ' + refDate;
status.htmlText += '<br><font color="#666666">Status: ' + currStatus + '</font>';
}
// Opens a new browser window and loads the file
public function openDoc(event:MouseEvent):void {
//removed due to irrelevance
}
]]>
</mx:Script>
</mx:HBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn headerText="lalala" dataField="serviceID" width="50"/><!---this is the dummy column that I created and is the only one that functions properly-->
</mx:columns>
</mx:DataGrid>

Answer 1

When you override set data function, you need to say
super.data = value;
It will fix your problem.
If you want to run the complete application, here is an example based on your code:
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script><![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var myArrayCollection:ArrayCollection = new ArrayCollection([
{ID:"1",claimantHeader: "ClaimHeader1",statusHeader:"StatusHeader1", serviceID:"SID1" , servId:"1001", name:"Bikram Dangol", type:"Type 1",specialty:"Speciality 1", claim:"Claim 1", date:"12/06/2014", refDate:"11/06/2014", currStatus:"Active"},
{ID:"2",claimantHeader: "ClaimHeader2",statusHeader:"StatusHeader2", serviceID:"SID2", servId:"1002", name:"Anup Dangol", type:"Type 2",specialty:"Speciality 2", claim:"Claim 2", date:"12/07/2014", refDate:"11/07/2014", currStatus:"Inactive"},
{ID:"3",claimantHeader: "ClaimHeader3",statusHeader:"StatusHeader3", serviceID:"SID3", servId:"1003",name:"Lunish Yakami", type:"Type 3",specialty:"Speciality 3", claim:"Claim 3", date:"12/08/2014", refDate:"11/08/2014", currStatus:"OnHold"},
]);
]]></mx:Script>
<mx:DataGrid id="servicegridUI" left="10" right="10" top="10" bottom="85" selectable="true" dataProvider="{myArrayCollection}"
styleName="formDataGrid" variableRowHeight="true" toolTip="Double-click to view.">
<mx:columns>
<mx:DataGridColumn headerText="ID" dataField="ID" width="175">
<mx:itemRenderer>
<mx:Component>
<mx:HBox paddingBottom="3" height="70" paddingLeft="5" horizontalGap="1" paddingTop="2" horizontalScrollPolicy="off" verticalScrollPolicy="off">
<mx:Text height="100%" width="100%" id="ID" htmlText="" selectable="true" doubleClick="openDoc(event)" doubleClickEnabled="true"/>
<mx:Script>
<![CDATA[
var refId:String = "";
override public function set data(value:Object):void {
super.data = value;
//variables for setting text are created here
ID.htmlText = 'ID: ' + refId + '<br><font color="#666666">Service ID: ' + data.servId + '</font>';
ID.htmlText +='<br><font color="#666666">Type and Specialty: ' + data.type + ' - ' + data.specialty + '</font>';
}
public function openDoc(event:MouseEvent):void {
//removed due to irrelevance
}
]]>
</mx:Script>
</mx:HBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn headerText="Claimant" dataField="claimantHeader" width="125">
<mx:itemRenderer>
<mx:Component>
<mx:HBox paddingBottom="3" height="70" paddingLeft="5" horizontalGap="1" paddingTop="2" horizontalScrollPolicy="off" verticalScrollPolicy="off">
<mx:Text height="100%" width="100%" id="claimant" htmlText="" selectable="true" doubleClick="openDoc(event)" doubleClickEnabled="true"/>
<mx:Script>
<![CDATA[
var refId:String = "";
override public function set data(value:Object):void {
super.data = value;
//variables for setting text are created here
claimant.htmlText = 'Claim: ' + data.claim + '<br><font color="#666666">Name: '+ data.name +'</font>';
claimant.htmlText +='<br><font color="#666666">Date: '+ data.date+'</font>';
}
// Opens a new browser window and loads the file
public function openDoc(event:MouseEvent):void {
//removed due to irrelevance
}
]]>
</mx:Script>
</mx:HBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn headerText="Status" dataField="statusHeader" width="70">
<mx:itemRenderer>
<mx:Component>
<mx:HBox paddingBottom="3" height="70" paddingLeft="5" horizontalGap="1" paddingTop="2" horizontalScrollPolicy="off" verticalScrollPolicy="off" >
<mx:Text height="100%" width="100%" id="status" htmlText="" selectable="true" doubleClick="openDoc(event)" doubleClickEnabled="true"/>
<mx:Script>
<![CDATA[
var refId:String = "";
override public function set data(value:Object):void {
super.data = value;
//variables for setting text are created here
status.htmlText = 'Date: ' + data.refDate;
status.htmlText += '<br><font color="#666666">Status: ' + data.currStatus + '</font>';
}
// Opens a new browser window and loads the file
public function openDoc(event:MouseEvent):void {
//removed due to irrelevance
}
]]>
</mx:Script>
</mx:HBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn headerText="lalala" dataField="serviceID" width="50"/><!---this is the dummy column that I created and is the only one that functions properly-->
</mx:columns>
</mx:DataGrid>
</mx:Application>