How do I pass a value from a selected datagrid row to a popup

Question

I am working on a project tracking application in flex and need to pass the value of one of the rows from the datagrid to a popup. We have a screen with 2 data grids. The first datagrid lists the projects, their start, and end date and the project owner. The datagrid below the first datagrid lists the tasks for that specific project listed in the datagrid above. When you click on the project name above, the datagrid below is populated with the tasks. Within the tasks datagrid are start and end date boxes.
What I need to do is be able to pass the project ID from the original datagrid into a popup that is called when a user changes the date of a project task. The popup is designed to submit a reason for why the user is changing the date on the task. In short, when they submit a reason, I need the project id passed from the datagrid into the popup so when submit is clicked, the proper row in the DB table is update via a CFC. Thank you.

Answer 1

I tried that, but when I try to build the project, I get the error that there is a call to an undefined value. Here is code:
Project Component:
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
    width="100%" height="100%" creationComplete="init();" xmlns:mxml="components.mxml.*">
    <mx:Script>
        <![CDATA[
            import mx.events.ListEvent;
            import mx.controls.dataGridClasses.DataGridColumn;
            import mx.rpc.events.ResultEvent;
            import mx.managers.PopUpManager;
            import mx.core.IFlexDisplayObject;
            import components.mxml.NewProject;
            import components.mxml.NewTask;
            import components.mxml.dateChangeNotice;
            import mx.controls.Alert;
            private function init():void{
                roGetData.getProjects();
                //roGetData.getTasks();
            private function projectClick(event:ListEvent):void{
                //Alert.show(dgProjects.selectedItem.projectID);
                roGetData.getTasks(dgProjects.selectedItem.projectID);
            private function refreshProjects(event:MouseEvent):void{
                roGetData.getProjects();
            private function ResultEvent_Projects(event:ResultEvent):void{
                dgProjects.dataProvider = event.result;
            private function ResultEvent_Tasks(event:ResultEvent):void{
                adgTasks.dataProvider = event.result;
            private function ResultEvent_UpdateTasks(event:ResultEvent):void{
                Alert.show('Your task was updated');
            private function showNewProject():void{
                var newProjectWindow:IFlexDisplayObject =
                    PopUpManager.createPopUp(this, NewProject, true);
                newProjectWindow.addEventListener(MouseEvent.CLICK, refreshProjects);
            private function showNewTask():void{
                var newTaskWindow:IFlexDisplayObject =
                    PopUpManager.createPopUp(this, NewTask, true);
            private function dateFormat(item:Object, column:DataGridColumn):String{
                return dateFormatter.format(item[column.dataField]);
                //Function calls the Reason popup window
            //private function changeReason():void{
                //Create Popup Window
                //var resultWindow:IFlexDisplayObject =
                //PopUpManager.createPopUp(this, dateChangeNotice, false);
        ]]>
    </mx:Script>
    <mx:RemoteObject id="roGetData" destination="ColdFusion" source="projectTracker.components.cfc.controllers.getController">
        <mx:method name="getProjects" result="ResultEvent_Projects(event);" fault="Alert.show(event.fault.faultString);" />
        <mx:method name="getTasks" result="ResultEvent_Tasks(event);" fault="Alert.show(event.fault.faultString);" />
    </mx:RemoteObject>
    <!--<mx:RemoteObject id="roUpdateData" destination="ColdFusion" source="projectTracker.components.cfc.controllers.updateController">
        <mx:method name="updateTasks" result="ResultEvent_UpdateTasks(event);" fault="Alert.show(event.fault.faultString);" />
    </mx:RemoteObject>-->
    <mx:DateFormatter id="dateFormatter" />
    <mx:HBox width="100%">
        <mx:Label text="Projects:" />
        <mx:Button label="Insert New Project" click="showNewProject();"/>
    </mx:HBox>   
    <mx:Panel width="100%" height="45%" title="Projects">
        <mx:DataGrid id="dgProjects" width="100%" height="100%" itemClick="projectClick(event);" dataProvider="">
            <mx:columns>
               <mx:DataGridColumn dataField="projectID" headerText="ProjectID" visible="false" />- I Need to pass this value
                <mx:DataGridColumn dataField="name" headerText="Project" />
                <mx:DataGridColumn dataField="startDate" headerText="Date Started" labelFunction="dateFormat" />
                <mx:DataGridColumn dataField="endDate" headerText="Completion Date" labelFunction="dateFormat" />
                <mx:DataGridColumn dataField="description" headerText="Description" />
                <mx:DataGridColumn dataField="statusName" headerText="Status" />
                <mx:DataGridColumn dataField="ownerName" headerText="Owner" />
            </mx:columns>
        </mx:DataGrid>
    </mx:Panel>
    <mx:Panel width="100%" height="45%" title="Project Tasks">
        <mx:AdvancedDataGrid id="adgTasks" width="95%" height="100%" variableRowHeight="true">
            <mx:columns>
                <mx:AdvancedDataGridColumn dataField="taskID" visible="false" width="50" />
                <mx:AdvancedDataGridColumn dataField="name" width="25" />
                <!--<mx:AdvancedDataGridColumn dataField="startDate" headerText="Date Started" />
                <mx:AdvancedDataGridColumn dataField="endDate" headerText="Completion Date" />-->
                <mx:AdvancedDataGridColumn id="descript" dataField="description" headerText="Description" width="50"/>
                <mx:AdvancedDataGridColumn dataField="ownerID" headerText="Owner" width="25"  />
                <mx:AdvancedDataGridColumn dataField="notes" headerText="Project Notes" width="50"/>
                <mx:AdvancedDataGridColumn dataField="Dates" headerText="Dates" width="50"/>
            </mx:columns>
            <mx:rendererProviders>
                <mx:AdvancedDataGridRendererProvider dataField="taskID" columnIndex="5">
                    <mx:renderer>
                        <mx:Component>
                            <mxml:dgDateHSlider startDate="{data.startDate}" endDate="{data.endDate}"/>   
                        </mx:Component>
                    </mx:renderer>
                </mx:AdvancedDataGridRendererProvider>
            </mx:rendererProviders>
        </mx:AdvancedDataGrid>   
    </mx:Panel>
    <mx:HBox width="100%">
        <mx:Label text="Tasks:" />
        <mx:Button label="Insert New Task" click="showNewTask();"/>
        <mx:Spacer width="200"/>
    </mx:HBox>
</mx:VBox>
Popup Components
<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="400" title="Reason for Date Change" backgroundColor="#E5E4E4">
<mx:Script>
    <![CDATA[
             import mx.events.ValidationResultEvent;
            import mx.rpc.events.ResultEvent;
            import mx.managers.PopUpManager;
            import mx.core.IFlexDisplayObject;
            import components.mxml.NewUser;
            import mx.controls.Alert;
            import components.mxml.Projects;
            import components.mxml.NewTask;
        //Clear Text Area Function
       public function Clear():void{
            reasonText.text = "";
        //function to send notes to db via RO
        public function writeNotes():void{
  into here-->    updateReason.reasonUpdate(taskID.selectedItem,reasonText.text);  taskID.selectedItem is not recognized. It errors on compile
        //remote object Results Event
        public function reasonResult(event:ResultEvent):void{
            Alert.show("Label update successful, thank you!");
            Clear();
    ]]>
</mx:Script>
<!--Update Remote Object-->
<mx:RemoteObject id="updateReason" destination="ColdFusion" source="projectTracker.components.cfc.controllers.createController">
    <mx:method name="reasonUpdate" result="reasonResult(event);" fault="Alert.show(event.fault.faultString);"/>
</mx:RemoteObject>
<!--Reason Text Area-->
    <mx:TextArea x="19" y="60" width="90%" height="246" maxChars="1000" wordWrap="true" enabled="true" id="reasonText"/>
    <mx:Button label="Update" click="writeNotes()" right="65" bottom="0"/>
    <mx:Button label="Exit" click="PopUpManager.removePopUp(this);" right="10" bottom="0"/>
    <mx:Text text="Please Specify your reason for changing the dates of this task." width="90%" fontWeight="bold" top="10" horizontalCenter="0"/>
</mx:TitleWindow>