comboBox to fill up with Name from the DataArray2

[MattJohnson]

Does anybody have a clue why this is not working?

I just want the comboBox to fill up with Name from the DataArray2, then when a selection is made, show the associated information from DataArray2 in both the panel textBoxes and the dataGrid at the same time.

It seems like it should be very simple, but its driving me nuts!
The ComboBox is not filling up with the names, and I suspect that if they did, the panel and dataGrid would not show the info from the selected person.

I posted a different version before but nobody was able to help.
This one is slightly different than before in that the DataArray2 is structured differently.


<?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;
[Bindable] private var DataArray2:Array ;

<mx:Array id="DataArray2">
<People>
<Person>
<ID>1</ID>
<Name>John</Name>
<City>IT</City>
</Person>

<Person>
<ID>2</ID>
<Name>Susan</Name>
<City>Marketing</City>
</Person>
</People>
</mx:Array>

/*
<mx:Array id="DataArray">
<People>
<Person id="1">
<ID>1</ID>
<Name>John</Name>
<City>IT</City>
</Person>

<Person id="2">
<ID>2</ID>
<Name>Susan</Name>
<City>Marketing</City>
</Person>
</People>
</mx:Array>
*/

public function Fill():void
{
DataPanel.title = NamesComboBox.selectedLabel ;

// Fill Panel
//NameTextBox.text = {DataArray2.Name};
//IDNumberTextBox.text = {DataArray2.ID} ;
//CityTextBox.text = {DataArray2.City} ;

// Fill DataGrid
// this should be automatic as we have
// DataProvider="{DataArray2}" set for the DataGrid
}

]]>
</mx:Script>

<!-- ComboBox with list of Names from DataArray.Name -->
<mx:ComboBox id="NamesComboBox" labelField="Name" dataProvider="{DataArray2}" change="Fill();" x="10" y="10"></mx:ComboBox>

<!-- Panels Title gets set to selected Name, TextBoxes are filled with appropriate data -->
<mx:Panel id="DataPanel" title="Name" x="10" y="40" width="343" height="321" layout="absolute">
<mx:Label id="NameLabel" text="Name:" x="0" y="52" />
<mx:Text id="NameTextBox" x="66" y="52" width="47"/>

<mx:Label id="IDNumberLabel" text="IDNumber:" x="0" y="24"/>
<mx:Text id="IDNumberTextBox" x="66" y="24" width="47"/>

<mx:Label id="CityLabel" text="City:" x="0" y="78" />
<mx:Text id="CityTextBox" x="66" y="78" width="47"/>
</mx:Panel>

<!-- DaraGrid shows appropriate Data -->
<mx:DataGrid id="DataGrid" dataProvider="{DataArray2}" x="361" y="40" width="368" height="321">
<mx:columns>
<mx:DataGridColumn headerText="ID" dataField="ID"/>
<mx:DataGridColumn headerText="Name" dataField="Name"/>
<mx:DataGridColumn headerText="City" dataField="City"/>
</mx:columns>
</mx:DataGrid>

</mx:Application>

[Peter Cowling]

I posted a different version before but nobody was able to help.

Can you point out where that post was?

[MattJohnson]

This one.
http://www.actionscript.org/forums/showthread.php3?t=193565

[wvxvw]

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute">

<mx:ArrayCollection id="dataArray2">
<mx:source>
<mx:Array>
<mx:Object ID="1" name="John" city="IT"/>
<mx:Object ID="2" name="Susan" city="Marketing"/>
</mx:Array>
</mx:source>
</mx:ArrayCollection>

<mx:Script>
<![CDATA[
public function fill():void
{
dataPanel.title = namesComboBox.selectedLabel;
var obj:Object = dataArray2.getItemAt(namesComboBox.selectedIndex);
nameTextBox.text = obj.name;
IDNumberTextBox.text = obj.ID;
cityTextBox.text = obj.city;
}
]]>
</mx:Script>

<mx:ComboBox
id="namesComboBox"
labelField="name"
dataProvider="{dataArray2}"
change="fill()"
x="10"
y="10" />

<mx:Panel
id="dataPanel" title="name"
x="10" y="40" width="343"
height="321" layout="absolute">

<mx:Label id="nameLabel"
text="Name:" x="0" y="52" />
<mx:Text id="nameTextBox"
x="66" y="52" width="100"/>

<mx:Label id="IDNumberLabel"
text="IDNumber:" x="0" y="24"/>
<mx:Text id="IDNumberTextBox" x="66"
y="24" width="100"/>

<mx:Label id="cityLabel"
text="City:" x="0" y="78" />
<mx:Text id="cityTextBox" x="66"
y="78" width="100" />

</mx:Panel>

<mx:DataGrid id="DataGrid"
dataProvider="{dataArray2}"
x="361" y="40" width="368"
height="321">

<mx:columns>
<mx:DataGridColumn headerText="ID"
dataField="ID"/>
<mx:DataGridColumn headerText="Name"
dataField="name"/>
<mx:DataGridColumn headerText="City"
dataField="city"/>
</mx:columns>

</mx:DataGrid>

</mx:Application>
Something like this.

[MattJohnson]

Thanks a ton!

That fills the combox and Panel correctly, but the dataGrid I want to show only the information on the selected person, just like the panel.
I tried adding change="Fill();" into the dataGrid but that didn't work. I tried changing the dataProvider to call the function Fill() and that of course didn't work.

I want the grid to be blank, like the panel, until I actually select a person from the comboBox. In the 'Fill()' function, is there a way to create a bindable var and call to that?

I am pretty sure the syntax and format of this is wrong, but maybe it would give a general idea or inspiration for something..am I even close?



[Bindable] MyVar:ArrayCollection = new:ArrayCollection;

<mx:Script>
<![CDATA[
public function fill():void
{
dataPanel.title = namesComboBox.selectedLabel;
var obj:Object = dataArray2.getItemAt(namesComboBox.selectedIndex);
nameTextBox.text = obj.name;
IDNumberTextBox.text = obj.ID;
cityTextBox.text = obj.city;
// -----------------------------------
MyVar = DataArray2.lastRequest.people.Person ;
// -----------------------------------
}
]]>
</mx:Script>
// instead of binding to DataArray2, call to the last result of MyVar?
<mx:DataGrid id="DataGrid"
dataProvider="{MyVar}"
x="361" y="40" width="368"
height="321">


I also conscidered something like this, which SEEMS like it SHOULD work (to me), but doesn't pass any data to the Grid.


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

<mx:ArrayCollection id="dataArray2">
<mx:source>
<mx:Array>
<mx:Object ID="1" name="Mickey Mouse" city="IT"/>
<mx:Object ID="2" name="Donald Duck" city="Marketing"/>
<mx:Object ID="3" name="Minnie Mouse" city="IT"/>
</mx:Array>
</mx:source>
</mx:ArrayCollection>

<mx:Script>
<![CDATA[
public function fill():void
{
dataPanel.title = namesComboBox.selectedLabel;
var obj:Object = dataArray2.getItemAt(namesComboBox.selectedIndex);
nameTextBox.text = obj.name;
IDNumberTextBox.text = obj.ID;
cityTextBox.text = obj.city;
}

[Bindable] public var ArrayOfInfoOnSelectedPerson:Array ;

public function fillGrid():void
{
var ArrayOfInfoOnSelectedPerson:Object = dataArray2.getItemAt(namesComboBox.selectedIndex);
var IDX:String = ArrayOfInfoOnSelectedPerson.ID;
var nameX:String = ArrayOfInfoOnSelectedPerson.name;
var cityX:String = ArrayOfInfoOnSelectedPerson.city;
}
]]>
</mx:Script>

<mx:ComboBox id="namesComboBox" labelField="name" dataProvider="{dataArray2}" change="fill()" x="10" y="10" />

<mx:Panel id="dataPanel" title="name" x="10" y="40" width="343" height="321" layout="absolute">
<mx:Label id="nameLabel" text="Name:" x="0" y="52" />
<mx:Text id="nameTextBox" x="66" y="52" width="100"/>

<mx:Label id="IDNumberLabel" text="IDNumber:" x="0" y="24"/>
<mx:Text id="IDNumberTextBox" x="66" y="24" width="100"/>

<mx:Label id="cityLabel" text="City:" x="0" y="78" />
<mx:Text id="cityTextBox" x="66" y="78" width="100" />
</mx:Panel>

<mx:DataGrid id="DataGrid" dataProvider="{ArrayOfInfoOnSelectedPerson}" x="361" y="40" width="368" height="321">
<mx:columns>
<mx:DataGridColumn headerText="ID" dataField="IDX"/>
<mx:DataGridColumn headerText="Name" dataField="nameX"/>
<mx:DataGridColumn headerText="City" dataField="cityX"/>
</mx:columns>
</mx:DataGrid>

</mx:Application>

[wvxvw]

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute">

<mx:ArrayCollection id="dataArray1"/>

<mx:ArrayCollection id="dataArray2">
<mx:source>
<mx:Array>
<mx:Object ID="1" name="John" city="IT"/>
<mx:Object ID="2" name="Susan" city="Marketing"/>
</mx:Array>
</mx:source>
</mx:ArrayCollection>

<mx:Script>
<![CDATA[
public function fill():void
{
dataPanel.title = namesComboBox.selectedLabel;
var obj:Object = dataArray2.getItemAt(namesComboBox.selectedIndex);
nameTextBox.text = obj.name;
IDNumberTextBox.text = obj.ID;
cityTextBox.text = obj.city;
dataArray1.source = [obj];
dataArray1.refresh();
}
]]>
</mx:Script>

<mx:ComboBox
id="namesComboBox"
labelField="name"
dataProvider="{dataArray2}"
change="fill()"
x="10"
y="10" />

<mx:Panel
id="dataPanel" title="name"
x="10" y="40" width="343"
height="321" layout="absolute">

<mx:Label id="nameLabel"
text="Name:" x="0" y="52" />
<mx:Text id="nameTextBox"
x="66" y="52" width="100"/>

<mx:Label id="IDNumberLabel"
text="IDNumber:" x="0" y="24"/>
<mx:Text id="IDNumberTextBox" x="66"
y="24" width="100"/>

<mx:Label id="cityLabel"
text="City:" x="0" y="78" />
<mx:Text id="cityTextBox" x="66"
y="78" width="100" />

</mx:Panel>

<mx:DataGrid id="DataGrid"
dataProvider="{dataArray1}"
x="361" y="40" width="368"
height="321">

<mx:columns>
<mx:DataGridColumn headerText="ID"
dataField="ID"/>
<mx:DataGridColumn headerText="Name"
dataField="name"/>
<mx:DataGridColumn headerText="City"
dataField="city"/>
</mx:columns>

</mx:DataGrid>

</mx:Application>

The changes:
- DataGrid now has it's own dataProvider, this dataProvider is reset each time combo box changes it's value. That's it :)

[MattJohnson]

Perfect! Thats exactly what I needed to know.
Thank you VERY much!!!
The following two lines helped a lot!

dataArray1.source = [obj];
dataArray1.refresh();


Out of curiosity, if I wanted to access a specific part of dataArray2 (or dataArray1 after its been refreshed), could I refer to it like

[obj.ID]

or

dataArray2.ID


or either way?

Say I wanted to fill another textBox somewhere by using a different function.
(not practical I know, but just as an example to explain how to get data from a specific part of an existing array later in the script)

Thanks again!

[kshardul77]

Here is my version of the solution. There is no fill() method and all values are bound using the built-in data binding features of Flex.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

<mx:Array id="DataArray2">
<mx:Object ID="1" Name="John" City="IT" />
<mx:Object ID="2" Name="Susan" City="Marketing" />
</mx:Array>

<!-- ComboBox with list of Names from DataArray.Name -->
<mx:ComboBox id="NamesComboBox" labelField="Name" dataProvider="{DataArray2}" x="10" y="10"/>

<!-- Panels Title gets set to selected Name, TextBoxes are filled with appropriate data -->
<mx:Panel id="DataPanel" title="{NamesComboBox.selectedItem.Name}" x="10" y="40" width="343" height="321" layout="absolute">
<mx:Label id="NameLabel" text="Name:" x="0" y="52" />
<mx:Text id="NameTextBox" x="66" y="52" width="47" text="{NamesComboBox.selectedItem.Name}"/>

<mx:Label id="IDNumberLabel" text="IDNumber:" x="0" y="24"/>
<mx:Text id="IDNumberTextBox" x="66" y="24" width="47" text="{NamesComboBox.selectedItem.ID}"/>

<mx:Label id="CityLabel" text="City:" x="0" y="78" />
<mx:Text id="CityTextBox" x="66" y="78" width="47" text="{NamesComboBox.selectedItem.City}"/>
</mx:Panel>

<!-- DaraGrid shows appropriate Data -->
<mx:DataGrid id="DataGrid" dataProvider="{NamesComboBox.selectedItem}" x="361" y="40" width="368" height="321">
<mx:columns>
<mx:DataGridColumn headerText="ID" dataField="ID"/>
<mx:DataGridColumn headerText="Name" dataField="Name"/>
<mx:DataGridColumn headerText="City" dataField="City"/>
</mx:columns>
</mx:DataGrid>

</mx:Application>

I think the only time this may fail is when there is no data to be bound. But i'm not sure (even I'm new to Flex 3 ;))