Webservice as Combobox dataprovider

Does anyone have an example of how to use a webservice as a
dataprovider to a combobox?
I would like to see how to set the label and data values for
the combobox lookup list.
Thank you ahead of time.
Bill Brittain

You need a little function to find the index of the item in
the data provider and then sets the combo box's selected index to
that number. This example uses the
label, but you just as easily use the
data.
label
public function setSelectedLabel(label:String):void
for(var i:int=0; i< this.dataProvider.length; i++)
if(this.dataProvider.label==label)
this.selectedIndex=i
simon

Similar Messages

DataGrid Combobox dataprovider erasing items

I have a DataGrid that is linked to an array of custom data objects which I call a seriesList. You are supposed to be able to choose the name of each series via a combobox in the datagrid. It works fine except when the user selects the combobox and then clicks somewhere else in the interface, which closes the combobox and erases whichever item is previously selected!


<mx:DataGrid id="seriesTable" color="black" fontSize="9" rowHeight="30" editable="true" resizeEffect="slow" rollOverColor="#CCCCCC"
    selectionColor="#999999" dataProvider="{axis.seriesList}" width="100%"
    rowCount="{axis.seriesList.length > 2 ? axis.seriesList.length : 2}" >
        <mx:columns>
             <mx:DataGridColumn dataField="name" headerText="Name" width="280" headerStyleName="centered" id="nameColumn"
                     rendererIsEditor="true" editorDataField="result" itemRenderer="renderer.SeriesBoxRenderer"/>
        </mx:columns>
</mx:DataGrid>

<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()" horizontalAlign="center">
   <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            // Define a property for returning the new value to the cell.
            public var result:String="";
            [Bindable]
            private var dpValue:ArrayCollection;
            private function init():void {
                // list of possible names to choose from for this series
                dpValue = mx.core.Application.application.seriesArray;
            // Override the set method for the data property.
            override public function set data(value:Object):void {
                if (dpValue == null) init();
                super.data = value;
                if (value != null)     {
                    var currentValue:String = value.name;
                    var len:int = dpValue.length;
                    for (var i:int = 0; i < len; i++) {
                        if (dpValue[i].name == currentValue) {
                            editor.selectedIndex = i;
                            return;
                editor.selectedIndex = 0;            }
            public function onChange():void {
                var index:int = editor.selectedIndex;
                result = dpValue[index].name;
                data.name = dpValue[index].name;
        ]]>
    </mx:Script>
     <mx:ComboBox id="editor" textAlign="left" labelField="name" dataProvider="{dpValue}" change="onChange()"/>
</mx:VBox>

I'm thinking the problem may be the dataprovider for the combobox. This array is also shared with another List component in another tab on the interface. The reason I am thinking this is because I have another item renderer which uses a combobox and does not erase itself when you click nothing. Here is the code for that item, and the only difference I can see between this code and the code that doesn't work is the fact that the dataprovider is shared with another part of the code. Still not sure how to fix this, however.
          [Bindable]
            private var dpValue:ArrayCollection;
            private function init():void {
                dpValue = mx.core.Application.application.aquisitionOptions.lastResult.system.data;
                for ( var i:int=0; i<dpValue.length; i++ ) { //loop over the items in the dataProvider
                   if (dpValue[i].id == data.aquisitionID) { //compare desired value to current item.data value
                        editor.selectedIndex = i; //set the seletedIndex of the combo box
                        data.aquisitionDescr = dpValue[i].name;
                        break;
          // Override the set method for the data property.
            override public function set data(value:Object):void {
                super.data = value;
                if (dpValue == null) init();
                if (value != null)     {
                    var currentValue:String = value.aquisitionDescr;
                    trace ("\n current: ", currentValue);
                    var len:int = dpValue.length;
                    for (var i:int = 0; i < len; i++) {
                        if (dpValue[i].name == currentValue) {
                            editor.selectedIndex = i;
                            return;
                editor.selectedIndex = 0;
            public function onChange():void {
                var index:int = editor.selectedIndex;
                result = dpValue[index].name;
                data.aquisitionDescr = dpValue[index].name;
                data.aquisitionID = editor.selectedItem.id as String;
        ]]>
    </mx:Script>
     <mx:ComboBox id="editor" labelField="name" dataProvider="{dpValue}" change="onChange()"/>

<mx:DataGridColumn dataField="aquisitionDescr" headerText="Data Aquisition" width="160" headerStyleName="centered" id="acquisitionColumn"
                     rendererIsEditor="true" editorDataField="result" itemRenderer="renderer.AquisitionBoxRenderer"/>

Formatting textfile for Combobox.dataProvider

Can't seem to find any formatting rules for array
construction through an external file.
This is what i am trying to do:
I've loaded vars into the _root this works fine. Splitted its
value for constructing an array. This seems to work fine aswell.
If I code the array within the fla in this format:
my_dP= new Array(
{label:"choose..."},
{data:"
http://www.myserver.com/netlabel/Johannes
Lauxen.txt",label:"Johanes Lauxen"},
{data:"
http://www.myserver.com/netlabel/PQR1.txt",
label:"PQR1"}
and use this for the dataProvider for the combobox named
my_cb like this:
my_cb.dataProvider = my_dP;
everything works fine.
The problem is:
But if I put this in the same formatting in the textfile for
the array I create using split like I described above, the values
for my labels in my_cb are this text, i mean it doesn't
interpretate the loaded text as script, it just displays the code
as labels.
my textfile looks like this :
&var2={label:"choose..."}#{data:"
http://www.myserver.com/netla
bel/Johannes Lauxen.txt",label:"Johanes
Lauxen"}#{data:"
http://www.myserver.com/netlabel/PQR1.txt",
label:"PQR1"}&
(O, the # is used for delimiter)
How can i get this to work ? Or is it not the
textfileformatting that causes the problem ?
many thanks
(flash8 b.t.w.)

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="450" height="350">
    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            [Bindable]
            private var types:Array = ['colors','numbers','shapes'];
            private var dataProviders:Object =
                colors:['red','blue','green'],
                numbers:['1','2','3'],
                shapes:['circle', 'square','triangle']
            private function getItemDataProvider(type:Object):Array
                return dataProviders[type] as Array;
        ]]>
    </mx:Script>
        <mx:ComboBox id="typeSelector" dataProvider="{types}"/>
        <mx:ComboBox id="itemSelector" dataProvider="{getItemDataProvider(typeSelector.selectedItem)}"/>
</mx:Application>

DropDownList / ComboBox DataProvider Issue

In this example I have an ArrayCollection (values) that serves as a DataProvider and a Bindable field (value). I would like to twoWay bind the value and dynamically load the values. When dynamically loading the values, my bounded value is null.
I have two applications below, in the first example the dataprovider is initialized with all its values and the behavior is correct:
<?xml version="1.0"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark">
<s:layout>
    <s:VerticalLayout/>
</s:layout>
<fx:Declarations>
    <fx:String id="value">B</fx:String>
    <s:ArrayCollection id="values">
      <fx:String>A</fx:String>
      <fx:String>B</fx:String>
      <fx:String>C</fx:String>
    </s:ArrayCollection>
</fx:Declarations>
<s:ComboBox id="comboBox" selectedItem="@{value}" dataProvider="{values}"/>
<s:TextInput text="@{value}"/>
</s:Application>
In the second example the dataprovider is loaded dynamically, which is typical for a data driven application. Now the bounded value is lost:
<?xml version="1.0"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark">
<fx:Script><![CDATA[
    private function comboxCreated():void {
      values.addItem("A");
      values.addItem("B");
      values.addItem("C");
    ]]></fx:Script>
<s:layout>
    <s:VerticalLayout/>
</s:layout>
<fx:Declarations>
    <fx:String id="value">B</fx:String>
    <s:ArrayCollection id="values"/>
</fx:Declarations>
<s:ComboBox id="comboBox" selectedItem="@{value}" dataProvider="{values}" creationComplete="comboxCreated()"/>
<s:TextInput text="@{value}"/>
</s:Application>
Is there any recommended / elegant solution to fix this issue?
Kind Regards

I tried this and it seems to work fine - just moved the setting of the value of "value" to the creationComplete handler:
<?xml version="1.0"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark">
<fx:Script>
                    <![CDATA[
                              private function comboxCreated():void {
                                        values.addItem("A");
                                        values.addItem("B");
                                        values.addItem("C");
                                        value="B";
                    ]]>
</fx:Script>
<s:layout>
<s:VerticalLayout/>
</s:layout>
<fx:Declarations>
<s:ArrayCollection id="values"/>
<fx:String id="value"/>
</fx:Declarations>
          <s:ComboBox id="comboBox" selectedItem="@{value}" dataProvider="{values}" creationComplete="comboxCreated()"/>
          <s:TextInput text="@{value}"/>
</s:Application>

Setting Combobox 'dataProvider' @runtime and using 'labelFunction'

I have 2 comboboxes which are related i.e. when i change cb-1 i need to display values in cb-2 (cb-2 list varies with the value selected). I have simplified my case but this is what my problem is. After i set 'cb-2.dataProvider' when does 'labelFunction' for cb-2 get called?
If i am not clear enough please let me know. Here is the code.....
private function cb-1Change(event:ListEvent):void
{// This will be a dynamic one using the value selected in cb-1
cb-2.dataProvider = __model.someList.getItemAt(0).cb-2VOList; // extracting from a Map kind object
// This Label function is never getting called
private function displayCB-2Label(item:Object):String{
     // something
<mx:ComboBox d="cb-1"           dataProvider="{__model.cb-1List}"
          change="cb-1Change(event)"
/>
<mx:ComboBox d="cb-2"
          labelFunction="displayCB-2Label(event)"
          change="cb-1Change(event)"
/>
          change="cb-1Change(event)"
/>

Ryan,
        Thanks for the answer. I think i was not clear on my questions. Let me try it again:
Requirement:
       When ever user change cb-1 value it should populate a new list and assign to cb-2 dataProvider i.e. cb-2 list should refresh. cb-2 needs to display right label based on its 'labelFunction'.
cb1 - List of Strings
cb2 - List of VO's in the following format
ListVO:
       public var code:String;    // This Code is what user selects in cb-1
       public var listValues:ArrayCollection; // List of PlainVO's
PlainVO:
     public var name:String;
     public var value:String;
Also from your answer how can i call 'cb-2 label function in cb-1 change', i mean cb-2 labelFunction expects current 'ListVO' object...right?

ArrayCollection field as ComboBox dataProvider question

I have an ArrayCollection defined like this:
public var test:ArrayCollection = new ArrayCollection([
{ Id:"one", Amount:2000 },
{ Id:"two", Amount:1000 },
{ Id:"three", Amount:200 } ]);
And i would like to make 'Id' field of 'test' ArrayCollection
as dataProvider for a ComboBox compoenent but can't figure it out
how.I tried with following but get an error:
comboName.dataProvider = test.Id;
Can someone please help me with this?
thanks in advance

Dang, i totally forgot about 'labelField' property which
solves the problem:
comboName.labelField = "Id";
:)

ComboBox.dataProvider method problem

when i use this method the labels of the combo are populated.
.i want to populate the data fields of the combo in runtime, is
there a method or any other way to do it?

:

Dynamic dataprovider in Datagrid combobox.

Hi,
i am using Flex 3. I have a data grid with first two rows having item renderers as ComboBoxes. What i want to implement is that, depending on my selection in the first combobox, the respective second combobox should get a dataprovider of my choice.
For e.g.
If I select the 1st combobox as India, then the adjacent combobox should have the cities in India.
If I select the 1st combobox as France, then the adjacent combobox should have the cities in France.
I dont have the values in any local variables. The values must be fetched at runtime because the list of Countries(in first combobox) is very exaustive so fetching the list of all cities for all countries would not be right. So for each selection of country i have to make an http service call to fetch the corresponding city list.
My question is how do i dynamically give the cities as dataprovider to each of the combo boxes in each row.
Hope my description is comprehensible enough.
Thanks
Sid.

HI,
Can you check the below code. If that is what you need.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                 layout="vertical"
                 creationComplete="application1_initializeHandler(event)">
     <mx:Script>
         <![CDATA[
             import mx.collections.ArrayCollection;
             import mx.events.FlexEvent;
             // Defines your collections
             [Bindable]
             public var countriesData:ArrayCollection=new ArrayCollection([{label: 'India'}, {label: 'Brazil'}]);
             [Bindable]
             public var citiesData:ArrayCollection;
             [Bindable]
             public var collection:ArrayCollection=new ArrayCollection();
             protected function application1_initializeHandler(event:FlexEvent):void
                 dataGrid.addEventListener("countryChanged", country_changed_handler);
                 collection.addItem({cityData:citiesData});
            // Change this method to the remote callings.
            // In the resultEvent you will change the citiesData collection.
             protected function country_changed_handler(event:DataEvent):void
                 if (event.data == 'India')
                     dataGrid.selectedItem.cityData = new ArrayCollection([{label: 'Mumbai'}, {label: 'Delhi'}]);
                 else
                     dataGrid.selectedItem.cityData = new ArrayCollection([{label: 'São Paulo'}, {label: 'Rio de Janeiro'}]);
                 dataGrid.invalidateList();
             public function addRow(event:MouseEvent):void{
                 //collection.addItem(new Object());
                 collection.addItem({cityData:citiesData});
             public function dropRow(event:MouseEvent):void{
         ]]>
     </mx:Script>
     <mx:DataGrid id="dataGrid"
                  dataProvider="{collection}">
         <mx:columns>
             <mx:DataGridColumn>
                 <mx:itemRenderer>
                     <mx:Component>
                         <mx:ComboBox dataProvider="{this.parentDocument.countriesData}"
                                      labelField="label"
                                      change="combobox1_changeHandler(event)"
                                      selectedIndex="-1">
                             <mx:Script>
                                 <![CDATA[
                                     import mx.collections.ArrayCollection;
                                     import mx.events.ListEvent;
                                    protected function combobox1_changeHandler(event:ListEvent):void
                                         dispatchEvent(new DataEvent("countryChanged", true, true, this.selectedLabel));
                                 ]]>
                             </mx:Script>
                         </mx:ComboBox>
                     </mx:Component>
                 </mx:itemRenderer>
             </mx:DataGridColumn>
             <mx:DataGridColumn>
                 <mx:itemRenderer>
                     <mx:Component>
                         <mx:ComboBox labelField="label">
                             <mx:Script>
                                 <![CDATA[
                                          override public function set data(value:Object):void
                                            super.data = value;
                                            var prevSelectedItem:Object = this.selectedItem;
                                            this.dataProvider = data.cityData ;
                                            this.selectedItem = prevSelectedItem;
                                 ]]>
                             </mx:Script>
                         </mx:ComboBox>
                     </mx:Component>
                 </mx:itemRenderer>
             </mx:DataGridColumn>
         </mx:columns>
     </mx:DataGrid>
     <mx:HBox width="299" horizontalAlign="center" horizontalGap="51">
         <mx:Button label="Add" click="addRow(event)"/>
         <mx:Button label="Drop" click="dropRow(event)"/>
     </mx:HBox>
</mx:Application>

Combobox with dynamic dataProvider

I have a very simple code:
private function showAvailableLabels(resultXML:XML, param:Object):void
if (resultXML.children().length() == 0)
Alert.show("Sku " + sku.text + " not found!", "Error");
else
labels.dataProvider = "";
labels.dataProvider = resultXML.availablelabels;
labels.validateNow();
labels.setFocus();
labels.selectedIndex = 0;
That code assigns different dataProvider to a combobox at the run time. I cannot get the exact pattern, but after a few times the combobox starts showing data from a previous data assignment. Do I have to refresh it somehow?
Thanks

Here is a runnable demo I have put together using provided code:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                  xmlns:s="library://ns.adobe.com/flex/spark" creationComplete="switchDataProvider()"
                  xmlns:mx="library://ns.adobe.com/flex/halo"
                  minWidth="1024" minHeight="768">
     <fx:Script>
          <![CDATA[
          private var model_1:XML = <VFPData>
                                               <availablelabels>
                                                 <filename>193</filename>
                                                 <id>10</id>
                                               </availablelabels>
                                             </VFPData>
          private var model_2:XML = <VFPData>
                                             <availablelabels>
                                               <filename>192</filename>
                                               <id>9</id>
                                             </availablelabels>
                                             <availablelabels>
                                               <filename>160down</filename>
                                               <id>25</id>
                                             </availablelabels>
                                          </VFPData>
          private var current:XML = model_1;
          private function switchDataProvider():void
               current = current==model_1?model_2:model_1;
               comboBox.dataProvider = current.availablelabels;
          ]]>
     </fx:Script>
     <mx:VBox>
          <mx:ComboBox id="comboBox" labelField="filename"/>
          <mx:Spacer height="10"/>
          <s:Button click="switchDataProvider()" label="Switch"/>
     </mx:VBox>
</s:Application>
Click on the push button and check the content of the combo, you should 192 from previous data.

Populating a Combobox using Remoting with AMF and PHP

Hello all
I am using Zend framework and Flex 3.4 to create a webapp. I am stuck at how to populate a combobox dynamically using the service I created in PHP.
In some of examples I saw that result of database query was being converted into XML and then sent to Flex. This seems a little too time-consuming if I have to do it every time. I saw some examples in Adobe Docs about Remoting with AMF and PHP. That seems like a better approach although how it would be applicable here is beyond me right now.
Can somebody guide me in correct direction?
Thanks and Regards
Shivik

Try this: http://code.google.com/p/as3flexdb/ is very easy to use and it
will help.
All you need to populate a combo is:
<mx:ComboBox dataProvider="{query.Records} /

How do I get the value of a comboBox item that is in a grid?

Hi all,
I have a data grid that has comboBoxes in two of its columns.
What I need to do is get the values of those bombo boxes when a user highlights the row of the grid NOT when the user uses the comboBox. I understand how to pull the values out once the change handler is invoked on the comboBox, but I'm not seeing a way to get at the comboBoxes that belong to the currently highlighted gridRow.
I'm sure it's really straight forward, but I'm just not able to find any reference on how it's done. Any help greatly appreciated.

This code shows how you can do it if you know the dataProvider fields for the ComboBox data.
If this post answered your question or helped, please mark it as such.
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
   initialize="initData()">
   <mx:Script>
   <![CDATA[
    import mx.events.ListEvent;
      import mx.collections.*;
      private var DGArray:Array = [
         {Artist:'Pavement', Album:'Slanted and Enchanted', Price:11.99, combo1: [1,2,3], combo2: [100,200,300]},
         {Artist:'Pavement', Album:'Brighten the Corners', Price:11.99, combo1: [2,4,6], combo2: [200,400,600]}];
      [Bindable] public var initDG:ArrayCollection;
      public function initData():void {
         initDG=new ArrayCollection(DGArray);
      private function dgChangeHandler(event:ListEvent):void{
       var ac:ArrayCollection = event.currentTarget.dataProvider;
       txt.text = "";
       txt.text += ac.getItemAt(event.rowIndex).combo1 + "\n";
       txt.text += ac.getItemAt(event.rowIndex).combo2;
   ]]>
   </mx:Script>
   <mx:DataGrid id="myGrid" width="350" height="200"
      dataProvider="{initDG}" change="dgChangeHandler(event);">
      <mx:columns>
         <mx:DataGridColumn dataField="Artist" />
         <mx:DataGridColumn dataField="Album" />
         <mx:DataGridColumn dataField="Price" />
         <mx:DataGridColumn dataField="combo1">
          <mx:itemRenderer>
           <mx:Component>
            <mx:VBox>
             <mx:ComboBox dataProvider="{data.combo1}"/>
            </mx:VBox>
           </mx:Component>
          </mx:itemRenderer>
         </mx:DataGridColumn>
         <mx:DataGridColumn dataField="combo1">
          <mx:itemRenderer>
           <mx:Component>
            <mx:VBox>
             <mx:ComboBox dataProvider="{data.combo2}"/>
            </mx:VBox>
           </mx:Component>
          </mx:itemRenderer>
         </mx:DataGridColumn>
      </mx:columns>
   </mx:DataGrid>
   <mx:TextArea id="txt" width="100%" height="100%"/>
</mx:Application>

ComboBox inside an ItemRenderer keeps going back to initial selectedIndex

Hi,
     Thanks for taking a minute to help me solve this problem. I have the following component, what I want to do, is to save the selectedIndex on the data.selectedIndice variable. I have no trouble with that. The variable saves the correct new selected Index number, but the problem is that, for instance, if the initial selectedIndex was 0, and the user selects the third item of the ComboBox, the ComboBox will go back to selecting the 0 index (the new one was 3) even though that the seleccion.selectedIndex shows that 3 is selected (that's why data.selectedIndice saves 3)
<mx:HorizontalList
        bottom="0"
        backgroundAlpha="0.0"
        id="catalogoOpciones"
        columnCount="3"
        height="80"
        hideEffect="{esconderse}"
        horizontalScrollPolicy="on"
        selectable="false"
        showEffect="{mostrarse}"
        width="100%">
        <mx:itemRenderer>
           <mx:Component>
               <mx:VBox height="100%" verticalGap="0" horizontalAlign="center" creationComplete="init()">
                   <mx:Label id="titulo" text="{data.nombre}" textAlign="center" styleName="nombreOpcionDetallePlato" />
                   <mx:ComboBox id="seleccion" dataProvider="{data.opciones}" labelField="label"                          labelFunction="funcionLabelComboBox" styleName="comboOpcionDetallePlato" change="changeHandler(event)" />
                    <mx:Script>
                        <![CDATA[
                            import menucomponents.clases.OpcionesEvent;
                            import mx.events.ListEvent;
                            import mx.controls.Alert;
                            public function init():void {
                            public function changeHandler(event:ListEvent):void {
                                   Alert.show(seleccion.selectedIndex.toString);               //this shows the correct new index selected                                                             data.selectedIndice = seleccion.selectedIndex;               //at the beginning data.selectedIndice was 0, and when I                                                                                                                          change the selectedIdex, data.selectedIndice saves 1                             }                                                                                             correct value, but the ComboBox shows on the screen that                                                                                                                          the selected item is the first one (index 0) and not the                                                                                                                          second one (index 1) AS IT'S SUPPOSED TO
                            public function funcionLabelComboBox(item:Object):String {
                                    return item.label + ", $" + item.precio;
                        ]]>
                    </mx:Script>
                </mx:VBox>
            </mx:Component>
       </mx:itemRenderer>
    </mx:HorizontalList>
Thanks for the help
Sebastián Toro O

selectedIndice is public. What's funny is that if I don't use the selectedIndex="{data.selectedIndice}" and I comment the line:
data.selectedIndice = seleccion.selectedIndex
Then the CombBox works just fine. It doesn't go back to the initial selectedIndex. I´m going to solve this using Events and an external Array (Array.length = ComboBox.dataProvider.length) to save the selectedIndex, it's a very un-elegant solution but i think it's going to work. Also I might add, that if I send an Event and catch it outside the List, and try to modify the data.selectedIndice, from the particular ComboBox that I changed, the ComboBox still changes automatically it's selectedIndex.
Thanks for your help.
If some day you think how to solve this, I would really appreciate if you post it here.
Sebastián Toro O.

Populating a ComboBox from DB query

Hello –
I have created a ComboBox to allow users to choose a category
as a filter for a products catalog. The list of categories is
returned by one of the functions of a ColdFusion CFC I’m
using in the app; it has been tested and examined in the debugger
and is returning the correct ArrayCollection.
For now, I have ended up hard coding the ArrayCollection that
populates the ComboBox, like this:
<mx:ComboBox id="series" styleName="glass" width="250"
rowCount="16"
change="someFunction();">
<mx:dataProvider>
<mx:ArrayCollection>
<mx:Object label="All Categories" data="0"/>
<mx:Object label="Interlocking Puzzles" data="1"/>
<mx:Object label="Math Games" data="2"/>
// etc. - 16 categories
</mx:ArrayCollection>
</mx:dataProvider>
</mx:ComboBox>
Of course, the above works fine, but I would prefer to use
the CFC. I tried something like:
<mx:ArrayCollection id="categList"
source="mx.utils.ArrayUtil.toArray(roService.roMethod.result);"
<mx:ComboBox dataProvider="{categList}" />,
but I don’t know how to tell the component what the
‘label’ is and what the ‘data’ is . I am
sure this is an easy one for someone with a little experience.
Please, somebody, give me an idea how to code this, or at least
where I can look it up. I have read the whole help material, but
can’t figure it out.
Regards,
Carlos

For top-level properties of your item objects (which I think
you will have), just specify the labelField. For values in nested
objects, or for calculated or concatenated columns, you wil need to
use a labelFunction.
I advise against binding directly to the result
("lastResult", to be specific when binding) and advise using a
result handler function in which you can inspect the exact
structure of the event.result object (just "result" in an event
handler).
To work up to this, why not hard code a bit of dataProvider
that is EXACTLY what you think you will be getting from the CFC.
Put it in a [Bindable] variable and bind the combobox dataProvider
to that. Use labelField or labelFunction to get the combobox to
work with that, then implement the data service call, and in its
result handler, assign the event.result to the bindable variable.
Voila!
Tracy

How to select an item in s:ComboBox

With the mx:ComboBox setting a selected item from a data source was easy:
<mx:ComboBox dataProvider="{siteDictionary}" value="{getService.lastResult.@idSite}"/>
Where the dictionary is defined as something like this:
[Bindable] public var siteDictionary:ArrayCollection = new ArrayCollection([
{label:"Site 1", data:'1'},
{label:"Site 2", data:'2'}]);
And getService returns something like:
<service idSite="2"/>
With spark, I tried this:
<s:ComboBox dataProvider="{siteDictionary}" selectedItem="{getService.lastResult.@idSite}"/>
But obviously it doesn't work, because I just have the id, not the entire object. This is such a basic task I'm amazed that I could not find any examples on how to do it. I did find one, where a person set the selectedIndex just by looping through the dataProvider until they found the id. I REFUSE to accept that is the only way to do this! Seems like a step backward to me. Anyone know the right way?

Sorry, didn't notice you were using the value property on mx:ComboBox.
If you're getting back XML, unless you are going to access the data often,
you might be better off leaving it as XML and using XMLListCollection
instead of ArrayCollection.
Then, since you can probably guarantee that the XML query will return one
and only one XML node try:
selectedItem="{XML(getService.lastResult).@idSite[0]}"
If you really have to work with XML converted to objects you'll have to loop
through and find it. That's what mx:ComboBox did under the covers anyway.

Best way of setting ComboBox SelectedItem?

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

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

Webservice as Combobox dataprovider

Similar Messages

Maybe you are looking for