how to have a link in a datagrid and to pop up a window on clicking the link in flex?

Question

Hi, I have a datagrid with different types of columns, like I have checkboxes, combo boxes and text Inputs as the column types.

Now I want one of the column type to a link, with the label "view". All the rows in that column are link with the same label "View" and on clicking it, I want a Pop up window to be opened?

This is my code:

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%">  
<mx:Script>
    <![CDATA[

        [Bindable] 
        private var defectDetails:ArrayCollection = new ArrayCollection([ ]);

        private function addDefect():void{
             defectDG.dataProvider.addItem(
                {CommentHistory:"View"}
            );
            defectDG.height += 30; 
        }

        private function defectCommentsPopUp():void{
            var helpWindow:defectCommentsLookUp=defectCommentsLookUp(PopUpManager.createPopUp(this, defectCommentsLookUp, true));
        }
    ]]>
</mx:Script>

<mx:DataGrid id="defectDG" dataProvider="{defectDetails}" variableRowHeight="true" width="100%" height="75" >

<mx:columns>

 <mx:DataGridColumn headerText="Select" dataField="Select" itemRenderer="mx.controls.CheckBox" width="50" textAlign="center" />

 <mx:DataGridColumn headerText="Defect Id" dataField="DefectId" itemRenderer="mx.controls.TextInput" textAlign="center"/> 

 <mx:DataGridColumn headerText="Status" dataField="Status" itemRenderer="mx.controls.ComboBox" textAlign="center"/>

    <mx:DataGridColumn headerText="Severity" dataField="Severity" itemRenderer="mx.controls.ComboBox"  textAlign="center" />    

 <mx:DataGridColumn headerText="Comment History" dataField="CommentHistory" itemRenderer="mx.controls.Text" textAlign="center" headerWordWrap="true" />

</mx:columns>
</mx:DataGrid>

<mx:Button styleName="buttonStyle" label="Add New Defect" click="addDefect()"/>

</mx:VBox>

I didn't know how to bring a link in the datagrid. So used the Text control to display the "View" label. Now If I click this item, "View" in the datagrid, I want the Pop up function, i.e.,defectCommentsPopUp() to be called.

How to do this?

Answer 1

Assign values to commentHistory that would help to identify the row.

<mx:DataGridColumn dataField="commentHistory">
  <mx:itemRenderer>
    <mx:Component>
      <mx:Label text="View" click="outerDocument.onViewClick(data)"/>
    </mx:Component>
  </mx:itemRenderer>
</mx:DataGridColumn>

in the script:

private function onViewClick(item:Object):void
{
  //item contains the commentHistory value of the clicked row.
  showPopUp(item);
}