11 Replies Latest reply on Jun 17, 2009 4:02 AM by JeffryHouser

    Best way of setting ComboBox SelectedItem?

    kevnug

      hi all,

       

      I have a ComboBox populated with a collection of typed objects (CountryVOs), a DataGrid populated with another collection of objects (PropertyVOs) - and they have a common attribute (CountryID).

       

      I'd like to set the selected item/index of the ComboBox based on the datagrid selected item's 'common attribute'..

      The below sample works - but I'm wondering if there's a better way of doing this?  A large dataset could slow things down:

       

       

      <?xml version="1.0" encoding="utf-8"?>

      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

      layout="vertical" xmlns:vo="vo.*"

      creationComplete="init()">

       

       

      <mx:Script>

      <![CDATA[

      import vo.PropertyVO;

      import vo.CountryVO;

      import mx.collections.ArrayCollection;

       

      [Bindable] public var countryAC:ArrayCollection;

      [Bindable] public var propertyAC:ArrayCollection;

       

      [Bindable] private var currentProperty:PropertyVO;

      [Bindable] private var currentCountryIndex:int = -1;

       

       

      private function init():void{

      countryAC = new ArrayCollection();

      propertyAC = new ArrayCollection();

       

      var a:CountryVO = new CountryVO();

      a.CountryID = 1;

      a.CountryName = "Vietnam";

      countryAC.source.push(a);

       

      var b:CountryVO = new CountryVO();

      b.CountryID = 2;

      b.CountryName = "Scotland";

      countryAC.source.push(b);

       

      var pa:PropertyVO = new PropertyVO();

      pa.PropertyID = 1;

      pa.PropertyName = "Beach House";

      pa.CountryID = 1;

      propertyAC.source.push(pa);

       

      var pb:PropertyVO = new PropertyVO();

      pb.PropertyID = 2;

      pb.PropertyName = "The Castle";

      pb.CountryID = 2;

      propertyAC.source.push(pb);

      }

       

      private function selectHandler():void{

      currentProperty = dg.selectedItem as PropertyVO;

       

      for each(var item:Object in countryAC){

      if(currentProperty.CountryID == item.CountryID){

      currentCountryIndex = countryAC.getItemIndex(item);

      break;

      }

      }

      }

       

      ]]>

      </mx:Script>

       

      <mx:DataGrid id="dg" dataProvider="{propertyAC}"

      change="selectHandler()">

       

      <mx:columns>

      <mx:DataGridColumn headerText="PropertyID" dataField="PropertyID"/>

      <mx:DataGridColumn headerText="PropertyName" dataField="PropertyName"/>

      <mx:DataGridColumn headerText="Country" dataField="CountryID">

      <mx:itemRenderer>

      <mx:Component>

      <mx:VBox creationComplete="init()">

      <mx:Script>

      <![CDATA[

      import mx.binding.utils.ChangeWatcher;

       

      private var dataWatcher:ChangeWatcher;

       

      [Bindable] private var countryName:String;

       

      private function init():void{

         this.dataWatcher = ChangeWatcher.watch(this, 'data', dataChangeHandler );

         this.dataChangeHandler();

      }

       

      private function dataChangeHandler(event:Event=null):void{

      for each(var item:Object in outerDocument.countryAC){

      if(this.data.CountryID == item.CountryID){

      this.countryName = item.CountryName;

      }

      }

      }

       

      ]]>

      </mx:Script>

      <mx:Text text="{countryName}" selectable="false"/>

      </mx:VBox>

      </mx:Component>

      </mx:itemRenderer>

      </mx:DataGridColumn>

      </mx:columns>

      </mx:DataGrid>

       

      <mx:Form>

      <mx:FormItem label="PropertyID">

      <mx:TextInput id="PropertyIDTi" text="{currentProperty.PropertyID}"/>

      </mx:FormItem>

      <mx:FormItem label="PropertyName">

      <mx:TextInput text="{currentProperty.PropertyName}"/>

      </mx:FormItem>

      <mx:FormItem label="Country">

      <mx:ComboBox dataProvider="{countryAC}"

      selectedIndex="{currentCountryIndex}"

      labelField="CountryName"

      />

      </mx:FormItem>

       

      </mx:Form>

       

      </mx:Application>

       

       

      Archive attached...

       

       

      cheers,

       

      kevin

        • 1. Re: Best way of setting ComboBox SelectedItem?
          *Prashant Shelke* Level 4

          I think you have to go for itemEditor which will show Combo Box wheneve user will click on the cell.

           

          & I think there is no need to iterations to search country name as you can set editorDataField back to DataGrid cell on change of ComboBox.

           

          <mx:AdvancedDataGridColumn width="150" headerText="Location Type" dataField="geoAreaName" editorDataField="strGeoAreaName" headerWordWrap="true">
                                              <mx:itemEditor>
                                                  <mx:Component>
                                                      <mx:HBox width="100%" horizontalScrollPolicy="off" verticalScrollPolicy="off" horizontalAlign="left" >
                                                          <mx:Script>
                                                              <![CDATA[
                                                                  public var strGeoAreaName:String;                                                   
                                                                 
                                                                  public function setGeoAreaName():void
                                                                  {
                                                                      data.geoAreaId = cmbLocType.selectedItem.data;
                                                                      data.geoAreaName = cmbLocType.selectedItem.label;
                                                                      strGeoAreaName   = cmbLocType.selectedItem.label;
                                                                  }
                                                                 
                                                                   public function setPrevGeoArea():void
                                                                  {
                                                                      data.prevGeoAreaId    = cmbLocType.selectedItem.data;
                                                                  }
                                                              ]]>
                                                          </mx:Script>
                                                          <views:myComboBox width="120" id="cmbLocType" focusIn="setPrevGeoArea();"
                                                              dataProvider="{ outerDocument.cmbBoxLocationTypeDP }" selectedValue="{ data.geoAreaId }"
                                                              change=" setGeoAreaName() " creationComplete=" setGeoAreaName(); cmbLocType.setFocus(); "/>
                                                      </mx:HBox>
                                                  </mx:Component>
                                              </mx:itemEditor>
                                          </mx:AdvancedDataGridColumn>

           

          referr for myComboBox code, it has different features like selectedValue/ dropdown width according to contents of dropdown/ tooltip on dropdwon item:

          http://forums.adobe.com/message/2012001#2012001

          • 2. Re: Best way of setting ComboBox SelectedItem?
            kevnug Level 1

            Hi Prashant,

             

            Thanks for your reply - however I need the ComboBox to use a different DataProvider than the DataGrid.

            • 3. Re: Best way of setting ComboBox SelectedItem?
              JeffryHouser Level 4

              This comes up routinely.  And there are some ComboBox implementations out there that implement a selectedValue field ( The Flextras AutoCompleteComboBox is one of them ).

               

              To do it like that, you'd do something like this:

               

              private function selectHandler():void{

                currentProperty = dg.selectedItem as PropertyVO;

               

                myAutoCompleteComboBox.valueField = 'CountryID'

                myAutoCompleteComboBox.selectedValue = currentProperty.CountryID;

              }

               

              However, this is just a layer of abstraction of your looping approach.  Under the hood it is doing the same sort thing.

              1 person found this helpful
              • 4. Re: Best way of setting ComboBox SelectedItem?
                kevnug Level 1

                Thanks Jeffry.  I see the benefit in abstracting out so will take a look at some of those classes.

                 

                 

                cheers

                • 5. Re: Best way of setting ComboBox SelectedItem?
                  JeffryHouser Level 4

                  Let us know what w can do to help when checking out the Flextras AutoCompleteComboBox.

                   

                  One of the helpful things we did is include an event, such as  selectedValueNotFound ( http://www.flextras.com/AutoCompleteComboBox/docs/asdocs/com/flextras/autoCompleteComboBox /AutoCompleteComboBox.html#event:selectedValueNotFound ).  If the value you specify is not found for whatever reason, you can control the behaviour by cancelling the event [or not].  If canceled, the selectedItem / selectedIndex do not change.  If not canceled, they will be reset to the unselected state.

                   

                  To drill down into your component for the data, we also implemented a valueField ( http://www.flextras.com/AutoCompleteComboBox/docs/asdocs/com/flextras/autoCompleteComboBox /AutoCompleteComboBox.html#valueField ) and valueFunction ( http://www.flextras.com/AutoCompleteComboBox/docs/asdocs/com/flextras/autoCompleteComboBox /AutoCompleteComboBox.html#valueFunction ) .

                   

                  Just little helper functions to make things easier for you.

                   

                  Please contact us with any questions ( http://www.flextras.com/?event=ContactForm ).  It's our job to help you.

                  • 6. Re: Best way of setting ComboBox SelectedItem?
                    kevnug Level 1

                    Looks good mate and I hate being stingy but in this case I can't justify the expense for this project.

                     

                    I've worked around the issue by using the iteration method and setting a 'currentIndex' property in the model - not ideal but it seems to work ok in this case.

                     

                     

                    cheers

                     

                    kevin

                    • 7. Re: Best way of setting ComboBox SelectedItem?
                      JeffryHouser Level 4

                      Understood.  The selectedValue features of our AutoCompleteComboBox are nice to have, but I bet it took you an hour (or less) to implement the looping approach.  Buying our component for only that feature is not cost effective.

                       

                      If you're looking for an the AutoComplete functionality, I think we provide a nice package, though.

                       

                      I hope you'll keep an eye on Flextras for future projects and to see what we're up to next.  A Calendar component comes next. 

                      • 8. Re: Best way of setting ComboBox SelectedItem?
                        kevnug Level 1

                        Hmmm... I need a calendar component for an upcoming project.  At the moment I've been comparing flexlib, ILog & ImBizzi.  I like the recurrence rules of ILog's component - but can see how I could implement my own fairly easily.

                         

                        I just signed up for your newsletter - any eta's on the new component?

                        • 9. Re: Best way of setting ComboBox SelectedItem?
                          JeffryHouser Level 4

                          Calendar component is slated for a beta by end of next month.  We are starting with a CalendarDisplay; which we plan to follow up with a Gantt chart for scheduling type of applications (such as what you see in Google Calendar).

                           

                          But, we are in the business of making flexible, reusable interface pieces, not full fledged applications.  At this point, I'm not sure how "Click and Drag" easy it will be to create a full scheduling app; as that is not our main purpose in creating these applications.

                           

                          For more information on our thought behind our Calendar component, and how we're implementing it; check out the Component series of screencasts on The Flex Show.

                           

                          Thank you for your interest.  If you need something today, you're better off using an alternate solution.  If you need something in a few months, we'd be in a better position to help you out.

                           

                          Any questions, thoughts, or comments, drop me an e-mail either through this forum or using he Flextras contact form: http://www.flextras.com/?event=ContactForm .

                           

                          What else can I do for you today?

                          • 10. Re: Best way of setting ComboBox SelectedItem?
                            kevnug Level 1

                            Yeah, I'll need this in the next month or so.

                             

                            But I'll keep a look out for it.

                             

                            cheers

                            • 11. Re: Best way of setting ComboBox SelectedItem?
                              JeffryHouser Level 4

                              Best I can tell you is to sign in to your account, and join our beta beta program.  There will be a link from the account menu.