15 Replies Latest reply on Jun 22, 2009 2:17 PM by GeorgeWS

    Datagrid changes ComboBox

    GeorgeWS Level 1

      I have a DG filled from a RO. I have 2 fields Supplier and supplierID. I have a Combo box NEXT to the data grid, it is filled from a RO. supplier set as label and supplierid set as data. How do I press on a row and it change the combobox to the same supplierid or supplier? I read all about it everywhere and they are not real solutions for my project. I think this should be built into the combobox component I paid enough for the builder. The selectedItem in the combobox does nothing. HELP please



        • 1. Re: Datagrid changes ComboBox
          rtalton Level 4

          Use the combobox's selectedIndex property, not selectedItem, to show the desired item.

          • 2. Re: Datagrid changes ComboBox
            GeorgeWS Level 1

            Hum... The selectedIndex is for gettting the matching index. I do not know the index because the combobox if filled by a RO (label, data). So this results in a no match. I have tried so many different ways, I am stumped. When I use the selectedIndex and match it up with my "data" I get the combobox to change but its trying to match its index with my supplier numbers. So the wrong supplier get selected.



            • 3. Re: Datagrid changes ComboBox
              rtalton Level 4

              Sorry for any confusion.

              I can supply you with a solution, but first need to know:

              1) Do the dataGrid and ComboBox share the same data provider?

              2) Can you supply an example of the data used by the two components?


              If they share the same data provider, this will be relatvely simple.

              If not, a little more code is involved.



              • 4. Re: Datagrid changes ComboBox
                GeorgeWS Level 1

                The DG and CB do not share the same dataprovider. (I wish I knew how to do that, Some how you must get the DISTINCT values; not sure how) anyways...


                I have the DG that gets filled with (Company, SupplierID) company is like Bacardi, Brown Foreman and the SupplierID for these are 30, 100.

                The CB gets its data from a query (RO) that pulls the DISTINCT Company and SupplierID's. These come into the flex app as Label and Data. I want to either match the Label with Company or the Data with the SupplierID.



                • 5. Re: Datagrid changes ComboBox
                  rtalton Level 4

                  I posted a solution to a similar question:


                  Try that one.


                  • 6. Re: Datagrid changes ComboBox
                    GeorgeWS Level 1

                    Thanks, but that is two convoluted for me to make any scence out of.

                    • 7. Re: Datagrid changes ComboBox
                      rtalton Level 4

                      Don't get discouraged. You'll eventually need to do actionscript coding in any Flex application. Start with a simple loop through your data provider, and you'll see how to start accessing that data to do other things, Like synch the combo box to your data grid.

                      • 8. Re: Datagrid changes ComboBox
                        GeorgeWS Level 1

                        Thanks, I have actually written over 25 apps (big apps) This combobox thing has stumped me in a bunch of apps (I keep giving up or changing to a lesser component). WEEKS have been lost due to this. I tried Ben Forta's solution but that does not work (it has errors in the code, super); I tried so many things its ridiculous. I have posted here a bunch of times regarding this issue but still have no solution that works.


                        Thanks anyways



                        • 9. Re: Datagrid changes ComboBox
                          rtalton Level 4

                          Yeah, every case is a little different, but you'll basically look at the datagrid item you clicked on (using the ListEvent), read a value in that clicked-on item, than go to the combo box, look for that value in its dataprovider, and finally set the appropriate selected index on the combo box according to the index of the value in the data provider. Clear as mud?


                          If you can, post code here and you'll get a more specific answer. It would be helpful to see the data as returned by your data service (XML, Array, etc.) for the data grid AND the combo box. Also, post the data grid and combo box code.


                          hang in there and don't give up!

                          • 10. Re: Datagrid changes ComboBox
                            GeorgeWS Level 1

                            Its to big to post. The data is just like this for the combobox that is filled with a RO to arrayCollection:


                            Company               SupplierID


                            Bacardi                    30

                            Brown Forman          100

                            Remy                       56



                            My data grid has columns that have the same data as the Combobox, but a different Datapovider. The columns are named Company, SupplierID; this is also filled with a RO to arrayCollection


                            I have a main mxml, and 2 components, one has the Datagrid, and the other the Editing panel that has the combobox. When I press on the DG all the fields get filled in perfectly except the combobox. If I use mx:Label and try and display whats coming into the combobox I can see the Company and the SupplierID.


                            I was just trying out Boyzoids solution as well to no avail. I have read so much about this I cannot believe selectedItem and or selectedValue has not been added to the combobox properties. Nor can I bind the customComboBox. ARG so frustrating



                            • 11. Re: Datagrid changes ComboBox
                              rtalton Level 4

                              Unless I'm waaaaay off-base, this is what you want to do.


                              Notice you can select anything in the Combo Box, but when you click on a row in the DataGrid, the ComboBox is synched back up to it.


                              Let me know if this is what you intend in your app.

                              • 12. Re: Datagrid changes ComboBox
                                GeorgeWS Level 1

                                Yes, that is exactally what I want to do

                                • 13. Re: Datagrid changes ComboBox
                                  rtalton Level 4

                                  Cool. The code is posted below.

                                  This is the same solution I pointed you to earlier, so it still may not make sense to you, but I've got lots of comments in the code, so please read through them and crack open the help docs to see how it's being done. Nothing tricky here: just sort, search and set a value in the ComboBox. You can adapt this code and use it for lots of other situations where you need to search through a data provider for a value.


                                  P.S. Glad you conquered your frustration and let me assist ya!

                                  P.S.S. If you ever have any left over "stock", you can send it my way! ;-)


                                  <?xml version="1.0" encoding="utf-8"?>
                                  <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
                                          import mx.events.ListEvent;
                                          import mx.collections.ArrayCollection;       
                                          import mx.collections.SortField;
                                          import mx.collections.Sort;
                                          import mx.collections.IViewCursor;
                                          //Data provider for the ComboBox:       
                                          public var acCB:ArrayCollection = new ArrayCollection([
                                          {Company:"Bacardi", SupplierID:"30", idx:0},
                                          {Company:"Brown Forman", SupplierID:"100", idx:1},
                                          {Company:"Remy", SupplierID:"56", idx:2},
                                          //Data provider for the DataGrid:
                                          public var acDG:ArrayCollection = new ArrayCollection([
                                          {Company:"Bacardi", SupplierID:"30", idx:0},
                                          {Company:"Brown Forman", SupplierID:"100", idx:1},
                                          {Company:"Remy", SupplierID:"56", idx:2},
                                          private var cursor:IViewCursor;//Used to perform a search in an ArrayCollection.
                                          public var sortSuppliersData:String;//Used to determine the sort field last used.
                                          //These functions sort the ComboBox data provider.
                                          //Note that the data provider uses the 'idx' field for one of the sorts.
                                          //This allows me to get it back to the "natural", "unsorted" order--
                                          //--how I want the values to appear in the ComboBox after a search.

                                          //Not necessary, but you may find it useful.
                                          public function sortAC():void{
                                              //Sort on the 'SupplierID' field.
                                              var sortAC:Sort = new Sort();
                                              sortAC.fields = [new SortField('SupplierID')];
                                              acCB.sort = sortAC;
                                              //This var stores what field we sorted on:
                                              sortSuppliersData = 'SupplierID';
                                          public function unsortAC():void{
                                              //Sort on the 'idx' field.  DEFAULT.
                                              var sortAC:Sort = new Sort();
                                              sortAC.fields = [new SortField('idx')];
                                              acCB.sort = sortAC;
                                              //This var stores what field we sorted on:
                                              sortSuppliersData = 'idx';
                                          public function syncComboBoxToDataGrid(event:ListEvent):void{
                                              //Called by click on a DataGrid row.
                                              //First, sort the ComboBox array (must be done prior to cursor search):
                                              if (sortSuppliersData != 'SupplierID'){
                                              //get the currently selected item's SupplierID value:
                                              var supplierID:String = event.target.selectedItem.SupplierID;
                                              //Put that into an Object:
                                              var SupplierIDObject:Object = {SupplierID:supplierID};
                                              //Create a search cursor on the ComboBox's DataProvider:
                                              cursor = acCB.createCursor();
                                              //Search for the Object within the ComboBox's DataProvider:
                                              var supplierFound:Boolean = cursor.findFirst(SupplierIDObject);
                                              if (supplierFound){//If the value was found...
                                                  //Found it!; assign the found object data to the cbSuppliers ComboBox.
                                                  //This will assure the displayed value matches the selected data.
                                                  var cbSupplierIDFoundObject:Object = cursor.current;
                                                  cbSuppliers.selectedItem = cbSupplierIDFoundObject;
                                              //Now, return the ComboBox to its 'unsorted', initial state:
                                          private function setComboBoxIndex(event:ListEvent):void{
                                              cbSuppliers.selectedItem = event.target.selectedItem;
                                          <mx:ComboBox id="cbSuppliers"
                                             prompt="select one..."
                                             x="158" y="50">
                                          <mx:DataGrid dataProvider="{acDG}" x="58" y="137" width="396"
                                              itemClick="syncComboBoxToDataGrid(event)" >

                                  • 14. Re: Datagrid changes ComboBox
                                    GeorgeWS Level 1

                                    I am not smart. I dont know what all the sort suff has to do with anything. I have my DG in a component that is called by the default mxml and the detail (where the combobox is) in another component. how do they talk? my itemClick is like this:


                                    public function itemClicked(event:ListEvent):void


                                    if (event.rowIndex != 0 )


                                    this.parentDocument.contactSelectedFunc(mainList.selectedItem , true);




                                    This is in the ListComponent.mxml of my application


                                    So I do not see how to get the syncComboBoxToDataGrid(event) to fire on the DetailComponent.mxml (where I think the code you send me goes)


                                    sooo painfull

                                    • 15. Re: Datagrid changes ComboBox
                                      rtalton Level 4

                                      I'm guessing you didn't write this code? Taking a look at it:

                                      ListComponent calls a function in your main app: contactSelectedFunc(). It passes in the selected item from the data grid, and a boolean value. What you are doing is passing along an event from a custom component to the parent app. Now, you just need to pass it from the parent to the custom component containing the comobo box. So, from the parent app, just call a function in that second component, and pass the same data to it. And yes, put the code sample I gave you in that component to receive the event and act upon it.


                                      This is certainly not best practice. But you need to understand what your code is doing before you can logically separate functionality into different components, or make decisions on how to handle events. This is a huge subject, and the help docs are your best resource for understanding custom components and custom events. That's the road you are heading down, even though you don't realize it yet.