5 Replies Latest reply on May 6, 2011 10:26 AM by Michelle5002

    DataGrid DropdownList selected Item

    Michelle5002

      When I first pull up the datagrid, in the column which contains a dropdownlist of a Value Object from a WebService, it displays the objects field as I wanted.  However, when I select the column, instead of showing the drop down list, it just shows a blank drop down box.  Then when I click the drop down arrow it does show my list as I like it.  But when I select an item and Item selected returns the object, instead of displaying the objects field as it did before I selected the column, it now displays that there is an object called ReasonsDto.  So, how do I get the drop down list to not force the second interaction and how do I get the selected item saved to the table as an object but only display the field?

       

      Here is my current code

       

                  <mx:DataGridColumn headerText="Reason" width="100" dataField="reason.reason" editable="true"
                                     editorDataField="selectedItem">
                      <mx:itemEditor>
                          <fx:Component>
                              <mx:Canvas>
                                  <fx:Script>
                                      <![CDATA[
                                          import mx.collections.ArrayCollection;
                                          import mx.rpc.events.ResultEvent;
                                          import mx.events.FlexEvent;
                                          import mx.controls.Alert;
                                         
                                          [Bindable]
                                          public var reasonsDP:ArrayCollection;
                                         
                                          protected function sdd_creationCompleteHandler(event:FlexEvent):void
                                          {
                                              getReasonsResult.token = personnelBean.getReasons();
                                          }
                                         
                                          public function get selectedItem():ReasonDto
                                          {
                                              return selectableDropDown.selectedItem;
                                          }
                                         
                                          public function get prompt():ReasonDto
                                          {
                                              return selectableDropDown.selectedItem.reason;
                                          }
                                         
      <!--                                    public override function setFocus():void
                                          {
                                              selectableDropDown.setFocus();
                                          }
      -->                                   
                                          protected function getReasonsResult_resultHandler(event:ResultEvent):void
                                          {
                                              reasonsDP = getReasonsResult.lastResult;
                                          }
                                         
                                      ]]>
                                  </fx:Script>
                                  <fx:Declarations>
                                      <personnelbean:PersonnelBean id="personnelBean" fault="Alert.show(event.fault.faultString + '\n' + event.fault.faultDetail)" showBusyCursor="true"/>
                                      <s:CallResponder id="getReasonsResult" result="getReasonsResult_resultHandler(event)"/>
                                      <valueObjects:ReasonDto id="reasonDto"/>
                                      <!-- Place non-visual elements (e.g., services, value objects) here -->
                                  </fx:Declarations>
                                  <components:SelectableDropDown id="selectableDropDown"
                                                   dataProvider="{reasonsDP}"
                                                   labelField="reason"
                                                   selectField="reason"
                                                   selectFieldValue="reason"
                                                   creationComplete="sdd_creationCompleteHandler(event)"/>
                              </mx:Canvas>
                          </fx:Component>
                      </mx:itemEditor>
                  </mx:DataGridColumn>

        • 1. Re: DataGrid DropdownList selected Item
          Flex harUI Adobe Employee

          I didn't have time to really look into it, but you have to be careful that

          the editedDataField is returning the right level of object to match the

          datafield.  Also, using creationComplete often causes trouble since

          renderers are recycled.

          • 2. Re: DataGrid DropdownList selected Item
            Michelle5002 Level 1

            So help me understand what you mean by this statement

             

            The class which the datagrid is displaying has an embedded class which basically is a key field and a String for reasons.  To display the one text field in that class on the datagrid, I used the dataField property to display the reasons class reason field.  When I click that column, it renders a combo box which I wanted to have the current reason selected and displaying in the combo box field.  Of course I guess I wish I could have the comboBox expanded when the column is clicked to eliminate the second click on the rendered combobox.  But once the user clicks a reason, dont I want to send the full class to the underlieing data structure for the datagrid which would be the entire class?   Then once the user exits the column, shouldnt the datagrit re-render the column using the dataField property?    So am I correct or are you saying that I need to send back the reasons reason String only and behind the scenes somehow access the datagrids data.  Locate the selected record and update the data.  If this is true, why would they do it that way,  why not update the data in the grid with the class data and then re-render the column using the property it used to render it to start with?  Help me understand because it does not make any sense?

             

             

            I changed the datagridcolumn editorDataField = "value" and I changed the get funtion to value and returned the Reasons reason string and now it displays the correct display but I know it didnt update the underlining data which now needs to be saved and since it only copied over the string, it does not know what the key field is which was the point of using a class instead of just the string.  So first, is there a better way as I described above and if not then how do I update the data grid table so it does reflect the class and when I do an update to the SQL database it will know what the key value is?  Again, you would think the drop down list would have wanted you to return the actual data type in the underlieing table and then re-render it with the dataField property.  Its a shame it doesnt appear as if this is the case.

            • 3. Re: DataGrid DropdownList selected Item
              Michelle5002 Level 1

              This is how I got it to work but I think its really ugly.  Is there a better way to do this?

               

                          <mx:DataGridColumn id="reasonDGC" headerText="Reason" width="100" dataField="reason.reason" editable="true"
                                             editorDataField="value">
                              <mx:itemEditor>
                                  <fx:Component>
                                      <mx:Canvas>
                                          <fx:Script>
                                              <![CDATA[
                                                  import mx.events.FlexEvent;
                                                  import mx.controls.Alert;
                                                  import mx.collections.ArrayCollection;
                                                 
                                                  [Bindable]
                                                  public var reasonsDP:ArrayCollection;
                                                 
                                                  protected function sdd_InitializeHandler(event:FlexEvent):void
                                                  {
                                                      reasonsDP = outerDocument.getReasonsResult.lastResult;
                                                      reasonDto = outerDocument.nonAvailDg.selectedItem.reason;
                                                  }
                                                 
                                                  public function get value():String
                                                  {
                                                      outerDocument.nonAvailDg.selectedItem.reason = selectableDropDown.selectedItem;
                                                      return selectableDropDown.selectedItem.reason;
                                                  }
                                                 
                                              ]]>
                                          </fx:Script>
                                          <fx:Declarations>
                                              <valueObjects:ReasonDto id="reasonDto"/>
                                              <!-- Place non-visual elements (e.g., services, value objects) here -->
                                          </fx:Declarations>
                                          <components:SelectableDropDown id="selectableDropDown"
                                                                         width = "100%"
                                                                         prompt="{reasonDto.reason}"
                                                                         dataProvider="{reasonsDP}"
                                                                         labelField="reason"
                                                                         selectField="reason"
                                                                         selectFieldValue="{reasonDto.reason}"
                                                                         initialize="sdd_InitializeHandler(event)" />
                                      </mx:Canvas>
                                  </fx:Component>
                              </mx:itemEditor>
                          </mx:DataGridColumn>

               

               

               

              package components
              {
                import mx.events.FlexEvent;
               
                import spark.components.DropDownList;
               
                public class SelectableDropDown extends DropDownList
                {
                  public var selectField:String = "";
                  public var selectFieldValue:* = null;
                 
                  public function SelectableDropDown()
                  {
                    super();
                    this.addEventListener(FlexEvent.CREATION_COMPLETE, creationCompleteHandler);
                  }
                
                  private function creationCompleteHandler(event:FlexEvent):void
                  {
                    updateSelection();
                  }
                 
                  public function updateSelection():void
                  {
                    if (selectField != "" && selectFieldValue != null && dataProvider != null)
                    {
                      var dataObj:Object;
                      for (var i:Number=0; i<dataProvider.length; i++)
                      {
                        dataObj = dataProvider.getItemAt(i);
                        if (dataObj[selectField] == selectFieldValue)
                        {
                          selectedIndex = i;
                          break;
                        }
                      }
                    }
                  }
                }
              }

              • 4. Re: DataGrid DropdownList selected Item
                Michelle5002 Level 1

                I think this is the best code as far as I can tell.  See below.  At least it works.

                • 5. Re: DataGrid DropdownList selected Item
                  Michelle5002 Level 1

                  Answer Code

                              <mx:DataGridColumn id="reasonDGC" headerText="Reason" width="100"
                                                 dataField="reason" editable="true"
                                                 labelFunction="reasonFormat"
                                                 editorDataField="value">
                                  <mx:itemEditor>
                                      <fx:Component>
                                          <mx:Canvas>
                                              <fx:Script>
                                                  <![CDATA[
                                                      import mx.events.FlexEvent;
                                                      import mx.controls.Alert;
                                                      import mx.collections.ArrayCollection;
                                                     
                                                      [Bindable]
                                                      public var reasonsDP:ArrayCollection;
                                                     
                                                      protected function sdd_InitializeHandler(event:FlexEvent):void
                                                      {
                                                          reasonsDP = outerDocument.getReasonsResult.lastResult;
                                                          reasonDto = outerDocument.nonAvailDg.selectedItem.reason;
                                                          selectableDropDown.openDropDown();
                                                      }
                                                     
                                                      public function get value():ReasonDto
                                                      {
                                                          return selectableDropDown.selectedItem;
                                                      }
                                                     
                                                  ]]>
                                              </fx:Script>
                                              <fx:Declarations>
                                                  <valueObjects:ReasonDto id="reasonDto"/>
                                                  <!-- Place non-visual elements (e.g., services, value objects) here -->
                                              </fx:Declarations>
                                              <components:SelectableDropDown id="selectableDropDown"
                                                                             width = "100%"
                                                                             prompt="{reasonDto.reason}"
                                                                             dataProvider="{reasonsDP}"
                                                                             labelField="reason"
                                                                             selectField="reason"
                                                                             selectFieldValue="{reasonDto.reason}"
                                                                             initialize="sdd_InitializeHandler(event)" 
                                                                             open="selectableDropDown.skin['dropDown'].owner = this"/>
                                          </mx:Canvas>
                                      </fx:Component>
                                  </mx:itemEditor>
                              </mx:DataGridColumn>

                   

                  package components
                  {
                    import mx.events.FlexEvent;
                   
                    import spark.components.DropDownList;
                   
                    public class SelectableDropDown extends DropDownList
                    {
                      public var selectField:String = "";
                      public var selectFieldValue:* = null;
                     
                      public function SelectableDropDown()
                      {
                        super();
                        this.addEventListener(FlexEvent.CREATION_COMPLETE, creationCompleteHandler);
                      }
                    
                      private function creationCompleteHandler(event:FlexEvent):void
                      {
                        updateSelection();
                      }
                     
                      public function updateSelection():void
                      {
                        if (selectField != "" && selectFieldValue != null && dataProvider != null)
                        {
                          var dataObj:Object;
                          for (var i:Number=0; i<dataProvider.length; i++)
                          {
                            dataObj = dataProvider.getItemAt(i);
                            if (dataObj[selectField] == selectFieldValue)
                            {
                              selectedIndex = i;
                              break;
                            }
                          }
                        }
                      }
                    }
                  }