5 Replies Latest reply on Dec 19, 2010 9:36 PM by BhaskerChari

    Editable combobox

    satyasuppu

      Hi ,

       

      Please help me how to edit and enter the data in combobox control..

      I have a combobox with list of values.

       

           <mx:ComboBox id="comboLov1"   editable="true">
             <mx:dataProvider>
               <mx:Array>
                     <mx:String></mx:String>
                     <mx:String>All</mx:String>
                     <mx:String>Customer Name</mx:String>
                     <mx:String>Opp ID</mx:String>
                     <mx:String>Fin Yr</mx:String>                  
                     <mx:String>Last Update By</mx:String>
                </mx:Array>
              </mx:dataProvider>
           </mx:ComboBox>


      for this editable combobox , user should be able to enter the data in that control and capture the data enterted in that control..And user should also able to select the lov's

       

      What ever the data which is either  (entered/selected lov )user should be able to capture and save it..

       

      Please help me..

       

       

      Thanks in advance..

        • 1. Re: Editable combobox
          BhaskerChari Level 4

          Can you a bit clearer on your problem..??

           

          Thanks,

          Bhasker

          • 2. Re: Editable combobox
            satyasuppu Level 1

            Hi,

             

            Thank you so much for your reply..

             

            What exactly i want is::

             

            I have a combobox..i made it editable using editable =true.

             

            Also i want to edit the LOV's..Means..already i have 5 lovs in my combobox...

            I want to enter a text in combobox..which is of 6th LOV and i want to save this value in DB..

             


            Thank you..

            • 3. Re: Editable combobox
              BhaskerChari Level 4

              Hi satyasuppu,

               

              You can check the below sample code...

               

              <?xml version="1.0" encoding="utf-8"?>
              <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
              <mx:Script>
                <![CDATA[
                 import mx.collections.ArrayCollection;
                 import mx.core.IUITextField;
                 import mx.core.UITextField;
                
                 [Bindable]private var comboDataProvider:ArrayCollection = new ArrayCollection([{label:"",data:""},{label:"All",data:"All"},{label:"Customer Name",data:"Customer Name"},{label:"Opp ID",data:"Opp ID"},{label:"Fin Yr",data:"Fin Yr"},{label:"Last Update By",data:"Last Update By"}]);
                
                 private function onFocusOut(event:FocusEvent):void
                 {
                  var textField:IUITextField = event.target as IUITextField;
                  comboDataProvider.addItem({data:textField.text,label:textField.text});
                  comboLov1.text = "";
                  // So here if you want to add the item first to database and then update it in DB then send
                  //a request to server using HTTP or WebService or RemoteObject which ever you are using and insert the item in the database and then
                  //get the new list of all items from the database and then bind again the list to combobox so that you will see
                  //the newly added item also.
                 }
                ]]>
              </mx:Script>

              <mx:VBox>
                <mx:Label text="Enter text and Focus Out to add the item to ComboBox" />
                <mx:ComboBox id="comboLov1" rowCount="10" labelField="label" editable="true" focusOut="onFocusOut(event)" dataProvider="{comboDataProvider}">
                      <!--<mx:dataProvider>
                        <mx:Array>
                              <mx:String></mx:String>
                              <mx:String>All</mx:String>
                              <mx:String>Customer Name</mx:String>
                              <mx:String>Opp ID</mx:String>
                              <mx:String>Fin Yr</mx:String>                  
                              <mx:String>Last Update By</mx:String>
                         </mx:Array>
                       </mx:dataProvider>-->
                    </mx:ComboBox>
              </mx:VBox>
              </mx:Application>

               

              Thanks,

              Bhasker

              • 4. Re: Editable combobox
                satyasuppu Level 1

                Hi  Bhasker,

                 

                 

                Thanks alot for your reply.

                 

                I have created a save button..click on save button,i am trying to access the value  combo box value..if i selected existing LOV ,i am able to show that value using alert message..i just need to acess the combo box value..

                 

                but if i enter any new (Lov) value and click on save that time not getting that value..Here New LOv value which user enter no need to add to Combo box .directly store this in DB..

                 

                 

                Please help me..

                • 5. Re: Editable combobox
                  BhaskerChari Level 4

                  Hi Satya,

                   

                  You can try this..

                   

                  <?xml version="1.0" encoding="utf-8"?>
                  <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
                  <mx:Script>
                    <![CDATA[
                     import mx.utils.StringUtil;
                     import mx.controls.Alert;
                     import mx.collections.ArrayCollection;
                     import mx.core.IUITextField;
                     import mx.core.UITextField;
                    
                     [Bindable]private var comboDataProvider:ArrayCollection = new ArrayCollection([{label:"",data:""},{label:"All",data:"All"},{label:" Customer Name",data:"Customer Name"},{label:"Opp ID",data:"Opp ID"},{label:"Fin Yr",data:"Fin Yr"},{label:"Last Update By",data:"Last Update By"}]);
                    
                     private function addItemToList(event:MouseEvent):void
                     {
                      var inputText:String = comboLov1.text;
                      if(StringUtil.trim(inputText) == "")
                      {
                       Alert.show("Please enter some text to add it to the List.");
                       return;
                      }
                      if(!checkIfItemExists(inputText))
                      {
                       //Since this is a new LOV you can add it to the DB by sending a request to the server using HTTP Service or any kind of service you are using
                       myService.send({item:inputText});
                       //comboDataProvider.addItem({data:inputText,label:inputText}) ;
                       comboLov1.text = "";
                      }
                      else
                      {
                       Alert.show("This item already exists in the List");
                      }
                     }
                     private function checkIfItemExists(item:String):Boolean
                     {
                    for each(var obj:Object in comboDataProvider)
                    {
                     if(String(obj.label).toLowerCase() == item.toLowerCase())
                     {
                      return true;
                     }
                    }
                    return false;
                     }
                    ]]>
                  </mx:Script>
                  <mx:HTTPService id="myService" url="http://localhost/yourservicedomain/service.aspx">

                  </mx:HTTPService>
                  <mx:HBox>
                    <mx:ComboBox id="comboLov1" rowCount="10" labelField="label" editable="true" dataProvider="{comboDataProvider}">
                          <!--<mx:dataProvider>
                            <mx:Array>
                                  <mx:String></mx:String>
                                  <mx:String>All</mx:String>
                                  <mx:String>Customer Name</mx:String>
                                  <mx:String>Opp ID</mx:String>
                                  <mx:String>Fin Yr</mx:String>                  
                                  <mx:String>Last Update By</mx:String>
                             </mx:Array>
                           </mx:dataProvider>-->
                        </mx:ComboBox>
                        <mx:Button label="Save" click="addItemToList(event)" />
                  </mx:HBox>
                  </mx:Application>

                   

                  Thanks,

                  Bhasker