5 Replies Latest reply on Aug 13, 2009 9:32 AM by Gregory Lafrance

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

    RTCXi Level 1

      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.

        • 1. Re: How do I pass a value from a selected datagrid row to a popup
          kloysen

          You should be able to use the selectedItem property.  This will return whatever data type you are putting in there containing all the data of that row.  All you have to do then is choose the id out of it.

          • 2. Re: How do I pass a value from a selected datagrid row to a popup
            Gregory Lafrance Level 6

            It is best to pass information between the main app and components using custom components. Below systemManager, popups and the main app are in different display lists, so add event listeners for custom events to systemManager. My Flex Cookbook post on custom events shows this:

             

            http://www.adobe.com/cfusion/communityengine/index.cfm?event=showdetails&product Id=2&postId=11246

             

            If this post answers your question or helps, please mark it as such.

            1 person found this helpful
            • 3. Re: How do I pass a value from a selected datagrid row to a popup
              RTCXi Level 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>

              • 4. Re: How do I pass a value from a selected datagrid row to a popup
                Gregory Lafrance Level 6

                taskID seems to be a dataField, but you can't reference that as a property, it only indicates to the DataGridColumn what field form the dataProvider to use.

                • 5. Re: How do I pass a value from a selected datagrid row to a popup
                  RTCXi Level 1

                  How do you recommend passing that value into the popup so that the proper row in the DB is updated? Are there any quick fixes to this? Thank you for your assistance.