7 Replies Latest reply on Jun 29, 2009 6:46 AM by flx23

    Binding data from db to ComboBox

    flx23

      Hi all,

       

      I am new to flex

      I am having a table in sqlite having 4 column namely :-

       

      id, name, color, changed

       

      I am displaying name in the combobox for selection ..further what i want is to bind the id with it

       

      like if the user selects a name from the combobox then i should save the corresponding id for that name in the db

       

      user is just able to see the name not id..so is there any property where i can define this id..and further save it on selection of name from the user

       

      HERE is MY CODE:--------------------------------

       

      private function dropEvt(event:DropdownEvent):void
                   {
                      
                      Txttest.text+=event.type + "\n";
                   }

       

                  private function changeEvent(event:Event)
                  {
                      Txttest.text+=event.currentTarget.selectedLabel + " " +
                     event.currentTarget.data + "\n";

       

                  }
                  private function init():void
                   {
                       //----
                      var IFolder:IFolders=new FolderService();
                      _data=IFolder.GetDrawers();
                      CombBxDrawerName.dataProvider=_data;
                      CombBxDrawerName.labelField="strDrawerName";  // this is displayed to the id
                      CombBxDrawerName.data="intDrawerID";   // i need a properrty to assign id..that is hidden and can be saved on selected

       

      PLEASE HELP

       

       

       


                     
                     
                  }  

       

      DESIGN:----------------------------------------

       

      <mx:ComboBox open="dropEvt(event)" close="dropEvt(event)"
      change="changeEvent(event)" id="CombBxDrawerName" x="180" y="20" width="185"/>

        • 1. Re: Binding data from db to ComboBox
          chris.huston.t10 Level 3

          Create your data model by assigning your sqlite data to an ArrayCollection. The ArrayCollection would be a collection of objects, with each object having id, name, color, and changed properties. The resulting ArrayCollection would look like this:

           

          private var dbData:ArrayCollection = new ArrayCollection([{id:1, name:'name 1', color:23456, changed:0}, {id:2, name:'name 2', color:45642, changed:1}, ...]);

           

          Depending on how you are accessing your sqlite data, you could just assign the db data directly to an ArrayCollection or cast it as an ArrayCollection.

           

          Then,you can bind this ArrayCollection to your ComboBox and display the name property while being able to access all the properties of a selected item.

           

          <mx:ComboBox open="dropEvt(event)" close="dropEvt(event)" dataProvider="{dbData}" labelField="name"
          change="changeEvent(event)" id="CombBxDrawerName" x="180" y="20" width="185"/>

           

          To get the name and id of a selected item from the ComboBox:

           

                      private function changeEvent(event:Event)
                      {
                          Txttest.text+=event.currentTarget.selectedItem.name + " " +
                         event.currentTarget.selectedItem.id + "\n";

           

                      }

           

          Chris

          • 2. Re: Binding data from db to ComboBox
            Gregory Lafrance Level 6

            You could also use XML and e4x syntax to extract the data field for the ComboBox.

             

            Use HTTPService to get the data from the database, and then in the HTTPService result handler put the query result in an XMLListCollection object. Then use that XMLListCollection object as the ComboBox dataProvider.

             

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

            • 3. Re: Binding data from db to ComboBox
              flx23 Level 1

              well the data is coming from db using the following bold code

               

              it returns array how to bring arraycollections then

               

              public function ResultSetWithArrayCollection(SqlStmnt:SQLStatement):void
                      {
                          _statement=new SQLStatement();
                          _statement=SqlStmnt;
                          _statement.sqlConnection=_connection;
                          _statement.addEventListener(SQLEvent.RESULT, onQueryResultWithCollection);
                          _statement.addEventListener(SQLErrorEvent.ERROR, selectError);
                          _statement.execute();
                       
                        }
                        private function onQueryResultWithCollection(event:SQLEvent):void
                      {
                          _dataCollection = _statement.getResult().data;  // it return array not arraycollection  return type of data is array..
                          dispatchEvent(event);
                      }

               

                     public function get dataCollection():ArrayCollection
                      {
                          return _dataCollection;
                      }
                      public function set dataCollection(resultCollection:ArrayCollection):void
                      {
                          _dataCollection = resultCollection;
                      }

              • 4. Re: Binding data from db to ComboBox
                Gregory Lafrance Level 6

                Okay, then in your case stick with ArrayCollection and the previous reply should help. You can wrap an array in an ArrayCollection with:

                 

                var ac:ArrayCollection = new ArrayCollection(myArray);

                1 person found this helpful
                • 5. Re: Binding data from db to ComboBox
                  chris.huston.t10 Level 3

                  Change your result function:

                   

                            private function onQueryResultWithCollection(event:SQLEvent):void
                          {
                              var _dataCollection:ArrayCollection = new ArrayCollection(_statement.getResult().data);

                            CombBxDrawerName.dataProvider=_dataCollection;

                          }

                   

                  Each of the ArrayCollection items will now be bound to your ComboBox. You can choose to display whichever of the item properties you want while still having access to all of the properties.

                   

                  Chris

                  • 6. Re: Binding data from db to ComboBox
                    flx23 Level 1

                    Ok i have done this now:-

                     

                     

                    private function onQueryResultWithCollection(event:SQLEvent):void
                            {
                                  var    arcol:ArrayCollection=new ArrayCollection(_statement.getResult().data);
                                _dataCollection=arcol;
                                dispatchEvent(event);
                            }

                     

                     

                    and binding it with combobox like this

                     

                    private function init():void
                                 {
                                     var IFolder:IFolders=new FolderService();
                                    _data=IFolder.GetDrawers();
                                    CombBxDrawerName.dataProvider=_data;
                                 
                                }  

                    Now my question is how to display the name and id

                     

                    the above code displays [object] in the combo box

                     

                    do i have to change something in design code :- .....????????????

                     

                            <mx:ComboBox open="dropEvt(event)" close="dropEvt(event)"
                    change="changeEvent(event)" id="CombBxDrawerName" x="180" y="20" width="185">
                    <mx:ArrayCollection>
                             <mx:Object label="{strDrawerName}" data="{intDrawerID}"/>
                          </mx:ArrayCollection>
                    </mx:ComboBox>

                    • 7. Re: Binding data from db to ComboBox
                      flx23 Level 1

                      thanks a lot guys...i got it

                       

                      while displaying do this:----

                       

                      private function init():void
                                   {
                                       var IFolder:IFolders=new FolderService();
                                      _data=IFolder.GetDrawers();
                                      CombBxDrawerName.dataProvider=_data;
                                      CombBxDrawerName.labelField="strDrawerName";
                                   //CombBxDrawerName.text="intDrawerID";
                                  
                                
                                     
                                     
                                  }  

                       

                      and while to fetch id or name what ever you want do this

                       

                       

                      Txttest.text+=event.currentTarget.selectedLabel + " " +
                                     event.currentTarget.selectedItem.intDrawerID+ "\n";