ComboBox embedded in DataGrid

Hi,
I want to embedded a ComboBox in a Datagrid.
The data displays in the Combox with the code in the
ComboBoxCellRenderer.as:
public function set data(value:Object):void {
_data = value;
var dp:DataProvider = new DataProvider(value.plaats);
dataProvider = dp;
public function get data():Object {
_data.plaats = arr;
return _data;
-How can I transmit the ComboBox.selectedItem to the Datagrid
-and how can I read the CellRenderer.data in the DataGrid,
var cr: ComboBoxCellRenderer =
Datagrid.itemToCellRenderer(e.item) as ComboBoxCellRenderer
=>returns null
trace(cr.data);
Thanks for helping me

Hi,
I'm sorry to bug you with a non-technical discussion, but I
am a recruiter in San Diego. My client is in need of 3 Senior Flex
Developers for their project. I have had an extremely rough time
finding someone for this position. Would you be interested in this
position, or do you know of anyone that might be? We do pay
referral fees. This position may be open to telecommuting.
Job Description:
They are in the midst of a major re-architecting of their
Corporate Management system utilizing many cutting edge
technologies. As it relates to the position they are using Flex as
their UI.
This is either a contract, or a full-time position.
Pay: Market Rate
Thanks for your help!
Natalie Fay
Outsource Technical
www.ostechnical.com
[email protected]
858.874.5637

Similar Messages

Dynamic comboBox in a dataGrid?

i have a dataGrid that starts out blank. When a button is
clicked, it populates based on the contents of a few components.
The 3rd column needs a comboBox. I need the following
behaviors:
1-when the button is clicked, this populates with the text
values in a certain text field.
2-under certain circumstances, i need to be able to add and
subtract from this comboBox.
i have read this:
http://blog.flexmonkeypatches.com/2008/02/18/simple-datagrid-combobox-as-item-editor-examp le/
but it looks like the comboBox in that example has fixed
values. How can i dynamically alter the values in
these comboBoxes? i have the comboBoxes in the dataGrid
component, but i can't figure out how to access their
dataProviders!
thanks!

You can have your comboBox itemRenderer populate based on an
ArrayCollection in your dataDrid dataProvider. Then, by changing
the dataProvider's ArrayCollection field, you could change each of
the comboBoxes accordingly. If you need different comboBox values
for different comboBoxes, then you will need something a bit
different. It would help to see your code.
Vygo

ComboBox inside a datagrid

Hi all,
How can I put a comboBox inside a datagrid?
I want to set the comboBox with their own dataprovider and
the id should
pass to the datagrid fill at the save time.
I try this but doesnt let me to include a dataprovider.
Any links??
please help and thank you in advance.
JFB
<mx:DataGridColumn headerText="Rate" dataField="rate"
editable="false">
<mx:itemRenderer>
<mx:Component>
<mx:VBox>
<mx:ComboBox id="rate_cb"></mx:ComboBox>
</mx:VBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>

Hi,
I think you need to declared your array public at the
begining of the page
like
[Bindable]
public var dataArray = new ArrayCollection();
You need to use outerDocument.
<mx:ComboBox activate="true" labelField="TEXT"
dataProvider="{outerDocument.dataArray}" />
I discover that the components are case sensitive also.
I hope this help.
JFB
"MLK_SS" <[email protected]> wrote in
message
news:[email protected]...
> Hi All,
>
> I am having a problem displaying data into a combo box
inside a data grid.
>
> I am getting data from a webservice and storing the data
into a Array
> Collection variable and trying to pass the var as the
data provider for
> the
> combo box.
>
> If I try an individual combo box it works fine.
>
> But, when trying to integrate into a datagrid it gives
an error saying
> Access
> of undefined property. I tried using outerDocument as
mentioned above, the
> error doesnot show up but the output does not show up
with the data inside
> the
> Data grid Combo box.
>
> <mx:DataGrid id="fav" x="10" y="332"
headerColors="[#C3D3AA, #C3D3AA]"
> enabled="true" editable="true"
textDecoration="underline">
> <mx:columns>
> <mx:DataGridColumn width="120" headerWordWrap="true"
> headerText="Fav./Del./ Copy/Edit" fontWeight="bold"
editable="false"
> dataTipField="Favourites" activate="true" >
> <mx:itemRenderer>
> <mx:Component>
> <mx:VBox>
> <mx:ComboBox activate="true" labelField="TEXT"
> dataProvider="{dataArray}" />
>
> </mx:VBox>
>
> </mx:Component>
> </mx:itemRenderer>
> </mx:DataGridColumn>
> </mx:columns>
> </mx:DataGrid>
>
> the function that handles the data result is :
>
> public function handleResult(event:ResultEvent):void{
>
> dataArray = new ArrayCollection();
>
> tasktypeArray = new ArrayCollection();
> var myXML:XML = new XML(event.result);
> var kf:XMLList = myXML.child("WORKLIST");
>
> var tasktype:XMLList = myXML.child("TASKTYPE");
> a = kf.item;
> b= kf.item[0].TEXT;
>
> textarea1.text = myXML.toXMLString();
> textarea3.text = myXML.child("TEMPLATE");
> trace(kf.child("TEXT").length());
> for (var x:int = 0; x < 25; x++) {
> var resultObj:Object = new Object ();
>
> resultObj.TEXT
> =tasktype.descendants("item")[x].TEXT.valueOf();
> dataArray.addItem(resultObj);
>
> }
>
> Please let me know where I am going wrong
>
> Thanks,
>
>

WPF Finding Selected ComboBox Item Within DataGrid

Hi all... I'm having an issue trying to access the selected item value in a ComboBox within a DataGridTemplateColumn.
Through another question/answer I have got the ComboBox displaying the names as it should but the next step I'm having issues with is to be able to loop through each row in the DataGrid and determine the selected value of the ComboBox in that row as
well as some other items and run some other code based on those values.
Any help would be appreciated.
Thanks,
Greg
<Grid>
<DataGrid x:Name="gvDefaultCWWSchedule" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="10,109,10,214" AutoGenerateColumns="False" Grid.Row="0"
AllowDrop="True" IsReadOnly="False" SelectionMode="Single" Background="Beige" CanUserAddRows="False">
<DataGrid.Columns>
<DataGridTemplateColumn Width="150">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<ComboBox Name="ddlUsers"
ItemsSource="{Binding Path=Users}"
DisplayMemberPath="{Binding Name, Mode=TwoWay}"
SelectedValuePath="{Binding Uid, Mode=TwoWay}"
SelectedIndex="{Binding Uid, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
SelectionChanged="ComboBox_SelectionChanged"
>
<ComboBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Name}" />
</StackPanel>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTextColumn Binding="{Binding WeekNumber}" />
</DataGrid.Columns>
</DataGrid>
<Button Content="Button" HorizontalAlignment="Left" Margin="729,32,0,0" VerticalAlignment="Top" Width="75" Click="Button_Click"/>
</Grid>
public partial class Test : Window
public Test()
InitializeComponent();
BindDefaultCWWSchedule();
private void BindDefaultCWWSchedule()
// THIS IS COMING FROM MY DB
List<CurrentUser> UsersFinal = new List<CurrentUser>();
UsersFinal.Add(new CurrentUser { Uid = 1, Name = "JOHN" });
UsersFinal.Add(new CurrentUser { Uid = 2, Name = "BILL" });
UsersFinal.Add(new CurrentUser { Uid = 3, Name = "MARY" });
ObservableCollection<CWWDefaultScheduleWeek> DefaultSchedules = new ObservableCollection<CWWDefaultScheduleWeek>();
DefaultSchedules.Add(new CWWDefaultScheduleWeek { Users = UsersFinal, WeekNumber = 1, SelectedUser = null });
DefaultSchedules.Add(new CWWDefaultScheduleWeek { Users = UsersFinal, WeekNumber = 2, SelectedUser = null });
DefaultSchedules.Add(new CWWDefaultScheduleWeek { Users = UsersFinal, WeekNumber = 3, SelectedUser = null });
DefaultSchedules.Add(new CWWDefaultScheduleWeek { Users = UsersFinal, WeekNumber = 4, SelectedUser = null });
gvDefaultCWWSchedule.ItemsSource = DefaultSchedules;
private void Button_Click(object sender, RoutedEventArgs e)
var rows = gvDefaultCWWSchedule.ItemsSource;
ObservableCollection<CWWDefaultScheduleWeek> CWWSchedAssignments = new ObservableCollection<CWWDefaultScheduleWeek>();
foreach (var row in rows)
CWWDefaultScheduleWeek r = (CWWDefaultScheduleWeek)row;
// FOR EACH ROW HERE I'M WANTING TO CREATE A LIST OF ITEMS AND RUN FURTHER CODE BASED ON IT... ISSUE IS FINDING THE ACTUAL SELECTED USER ON EACH ROW...
CWWSchedAssignments.Add(new CWWDefaultScheduleWeek
Users = r.Users,
SelectedUser = r.SelectedUser,
WeekNumber = r.WeekNumber
private void ComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
gvDefaultCWWSchedule.CommitEdit();
public class CWWDefaultScheduleWeek
public IEnumerable<CurrentUser> Users { get; set; }
public CurrentUser SelectedUser { get; set; }
public int WeekNumber { get; set; }
public class CurrentUser
public int Uid { get; set; }
public string Name { get; set; }

In a way, wpf is similar to web.
More so than windows forms anyhow.
XAML is mark up and flows like html.
You have padding and margin which are rather familiar concepts.
Whereas windows forms is absolute positioning and... well totally different from markup.
You might find this sample interesting as a sort of mvvm taster.
https://gallery.technet.microsoft.com/WPF-Dialler-simulator-d782db17
and event handling equivalents
http://social.technet.microsoft.com/wiki/contents/articles/30564.wpf-uneventful-mvvm.aspx
Note
With a combo you bind the selecteditem to a propfull and then you can put a method call in the setter. That will then be invoked when the user changes selection.
Good luck and welcome to wpf development.
It's a great technology.
Hope that helps.
Recent Technet articles: Property List Editing;
Dynamic XAML

How to use combobox to filter datagrid in Flash Builder 4?

Hi,
I've been working through the TestDrive application with Flash Builder 4 and I would like to learn how to filter a datagrid using a combobox. I've googled the subject and results for many different versions of Flash, some which look like they will take a considerable amount of time to implement. I'm hoping with Flash Builder 4 there is a straight-forward way to do this without writing pages of code.
I think I may be close to getting this working by passing the combobox value into a PHP script which queries the database with a WHERE clause.
Thakns,
David

I was able to get the data returned from a PHP call into an array by placing the following in the service result handler:
   public var myEmployeesArray : Array;
   [Bindable]
   public var myEmployeesDataProvider : ArrayCollection;
    myEmployeesArray = mx.utils.ArrayUtil.toArray(event.result);
    myEmployeesDataProvider = myEmployeesArray[0];   //data provider for the datagrid
Not certain how to use filterfunction yet though. I started to read this page but need to work on it more: http://cookbooks.adobe.com/post_Using_the_to_ArrayCollection_s_filterFunction-5441.html
I'd like to filter only one field in the ArrayCollection.
Also, for anyone else who may be learning while reading this, I found the following page helpful in figuring out how to load the PHP service return data into an array:
http://www.cflex.net/showFileDetails.cfm?ObjectID=415
David

Two comboBox in a datagrid

Hi All,
When I create a new line in my grid I want to include two
comboBox, the
second comboBox related to the first one.
I got it work partial, I can create the second combo on the
fly but how can
I insert the combo into the grid for specific row and column.
The column is the same but the row change if I add one.
Thanks
JFB

Yes? but how in a dynamic form?
This is what I'm doing... my setCategory function fill the
array for the
second comboBox but this only work for one row in my datagrid
because if I
set the second row in my datagrid and I change the option in
my first
comboBox it change the values for all second comboBox values.
Now I can create a new comboBox on the fly but if I say
comboBox.id =
"materialItem_cb" it doesn show in the datagrid.
How can I do this? Please help... I'm trying different things
without luck
Tks
JFB
public function setCategory(tempCombo:ComboBox):void{
acMaterialsItem.removeAll();
for each (var item:Object in acAllItems) {
if (item.itemCategoryID == tempCombo.selectedItem.id) {
acMaterialsItem.addItem(item);
<mx:DataGridColumn headerText="Category"
dataField="itemCategoryID"
editable="false" width="150">
<mx:itemRenderer>
<mx:Component>
<mx:VBox>
<mx:ComboBox id="category_cb"
dataProvider="{outerDocument.acItemCategory}"
labelField="label"
change="outerDocument.setCategory(category_cb)"
width="150"/>
</mx:VBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn headerText="Material Description"
dataField="materialItemID" editable="false" width="200">
<mx:itemRenderer>
<mx:Component>
<mx:VBox>
<mx:ComboBox id="materialItem_cb"
dataProvider="{outerDocument.acMaterialsItem}"
labelField="label"
width="200"/>
</mx:VBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
"ntsiii" <[email protected]> wrote in message
news:f98ags$h40$[email protected]..
> This must be handled by your item renderer.
>
> Tracy

Database driven combobox itemrenderer in DataGrid

Hi
I created a database driven combobox itemrenderer, code see below:
The data is loaded and shown correctly, but when I change the combobox, suddenly a "0" appears:
I can see in the debugger in combobox1_changeHandler, that the correct data is taken from the combo "this.selectedItem.data=3;" and written to "data.professionGroup", (changed from "1" to "3")
but then when the code jumps to set data the "value.professionGroup" is "0"?!?!
Thank yor for any pointers!
The DataGrid:
    <mx:DataGrid id="personDg" dataProvider="{sm.persons}" width="100%" height="100%" editable="true">
         <mx:columns>
            <mx:DataGridColumn headerText="firstName" dataField="firstName"/>
             <mx:DataGridColumn headerText="lastName" dataField="lastName"/>
             <mx:DataGridColumn headerText="professionGroup" dataField="professionGroup" editable="true" editorDataField="data"
                 rendererIsEditor="true"
                 itemRenderer="com.xxx.view.components.combobox.ProfessionGroupCombo">
             </mx:DataGridColumn>
        </mx:columns>
     </mx:DataGrid>
The ItemRenderer:
<?xml version="1.0" encoding="utf-8"?>
<mx:ComboBox xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo"
     change="combobox1_changeHandler(event)" initialize="combobox1_initializeHandler(event)" >
         <fx:Script>
             <![CDATA[
                 import mx.controls.dataGridClasses.DataGridListData;
                 import com.myfim.model.ShellModell;
                   import mx.events.ListEvent;
                    import mx.events.FlexEvent;
                 [Bindable]
                 private static var sm:ShellModell=ShellModell.getInstance();
                    public function setSelectedItemByValue(val:int):void{
                         this.selectedIndex = -1; // Show prompt if value is not found
                         for (var i:int=0;i<this.dataProvider.length;i++){
                            if(this.dataProvider[i].data == val){
                                 this.selectedIndex = i;
                                 break;
                         }// for
                 override public function set data(value:Object):void{
                    super.data=value; // value is the VO!
                     setSelectedItemByValue(value.professionGroup);
                 protected function combobox1_changeHandler(event:ListEvent):void
                    data.professionGroup=this.selectedItem.data;
                    // I can see in the debugger that "data.professionGroup" gets the correct data f.e. ="3" , but if it jumps to the "set data" the                          value.professionGroup is "0" !??
                protected function combobox1_initializeHandler(event:FlexEvent):void
                    this.dataProvider=sm.comboData.professionGroupAc; // AC of (label, data)
             ]]>
         </fx:Script>
</mx:ComboBox>

Hi,
yupiiee! I found the answer by myself, I had to change
editorDataField="data" to editorDataField="value"
Thats all! Then it works!
Martin Zach

Error while creating a custom combobox for Spark DataGrid

I am getting the following run time error:
Error: Required skin part openButton cannot be found.
    atspark.components.supportClasses::SkinnableComponent/findSkinParts() [E:\dev\hero_private_beta\frameworks\projects\spark\src\spark\componen ts\supportClasses\SkinnableComponent.as:671]
    atspark.components.supportClasses::SkinnableComponent/attachSkin()[E: \dev\hero_private_beta\frameworks\projects\spark\src\spark\components\ supportClasses\SkinnableComponent.as:646]
    atspark.components.supportClasses::SkinnableComponent/validateSkinCha nge()[E:\dev\hero_private_beta\frameworks\projects\spark\src\spark\com ponents\supportClasses\SkinnableComponent.as:406]
    atspark.components.supportClasses::SkinnableComponent/commitPropertie s()[E:\dev\hero_private_beta\frameworks\projects\spark\src\spark\compo nents\supportClasses\SkinnableComponent.as:420]
     atspark.components.supportClasses::ListBase/commitProperties()[E:\dev \hero_private_beta\frameworks\projects\spark\src\spark\components\supp ortClasses\ListBase.as:808]
    atspark.components::List/commitProperties()[E:\dev\hero_private_beta\ frameworks\projects\spark\src\spark\components\List.as:954]
    atspark.components.supportClasses::DropDownListBase/commitProperties( )[E:\dev\hero_private_beta\frameworks\projects\spark\src\spark\compone nts\supportClasses\DropDownListBase.as:504]
    atspark.components::ComboBox/commitProperties()[E:\dev\hero_private_b eta\frameworks\projects\spark\src\spark\components\ComboBox.as:644]
    atmx.core::UIComponent/validateProperties()[E:\dev\hero_private_beta\ frameworks\projects\framework\src\mx\core\UIComponent.as:8095]
     atmx.managers::LayoutManager/validateClient()[E:\dev\hero_private_bet a\frameworks\projects\framework\src\mx\managers\LayoutManager.as:934]
    atmx.core::UIComponent/validateNow()[E:\dev\hero_private_beta\framewo rks\projects\framework\src\mx\core\UIComponent.as:7953]
    atspark.components.supportClasses::GridLayout/layoutItemRenderer()[E: \dev\hero_private_beta\frameworks\projects\spark\src\spark\components\ supportClasses\GridLayout.as:1808]
    atspark.components.supportClasses::GridLayout/createTypicalItemRender er()[E:\dev\hero_private_beta\frameworks\projects\spark\src\spark\comp onents\supportClasses\GridLayout.as:460]
    atspark.components.supportClasses::GridLayout/updateTypicalCellSizes( )[E:\dev\hero_private_beta\frameworks\projects\spark\src\spark\compone nts\supportClasses\GridLayout.as:514]
    atspark.components.supportClasses::GridLayout/layoutColumns()[E:\dev\ hero_private_beta\frameworks\projects\spark\src\spark\components\suppo rtClasses\GridLayout.as:570]
    atspark.components.supportClasses::GridLayout/measure()[E:\dev\hero_p rivate_beta\frameworks\projects\spark\src\spark\components\supportClas ses\GridLayout.as:230]
     atspark.components.supportClasses::GroupBase/measure()[E:\dev\hero_pr ivate_beta\frameworks\projects\spark\src\spark\components\supportClass es\GroupBase.as:1109]
    atmx.core::UIComponent/measureSizes()[E:\dev\hero_private_beta\framew orks\projects\framework\src\mx\core\UIComponent.as:8383]
    atmx.core::UIComponent/validateSize()[E:\dev\hero_private_beta\framew orks\projects\framework\src\mx\core\UIComponent.as:8307]
    atspark.components::Group/validateSize()[E:\dev\hero_private_beta\fra meworks\projects\spark\src\spark\components\Group.as:956]
    atmx.managers::LayoutManager/validateSize()[E:\dev\hero_private_beta\ frameworks\projects\framework\src\mx\managers\LayoutManager.as:659]
    atmx.managers::LayoutManager/doPhasedInstantiation()[E:\dev\hero_priv ate_beta\frameworks\projects\framework\src\mx\managers\LayoutManager.a s:793]
    atmx.managers::LayoutManager/doPhasedInstantiationCallback()[E:\dev\h ero_private_beta\frameworks\projects\framework\src\mx\managers\LayoutM anager.as:1157]
Here is my combobox:
package
    import mx.controls.listClasses.BaseListData;
    import mx.controls.listClasses.IDropInListItemRenderer;
    import spark.components.ComboBox;
    public class sparkComboRendererDataGrid extends ComboBox implements IDropInListItemRenderer
        public function sparkComboRendererDataGrid()
            super();
        public function get listData():BaseListData
            return null;
        public function set listData(value:BaseListData):void
        override public function set dataProvider(value:Object):void
            super.dataProvider = value;
            // This may get called before dataProvider is set, so make sure not null and has entries
            if (value!=null && value.length)
                // Got it, set flag
                bDataProviderSet = true;
and here is the implementation:
var PersonnelPerson:ClassFactory = new ClassFactory(sparkComboRendererDataGrid);
PersonnelPerson.properties = {labelField : "person", dataProvider :
new XMLListCollection(dataList.consistcrew)};
var col:GridColumn = GridColumn(personnel.columns.getItemAt(0));
col.itemRenderer = PersonnelPerson;
Please help.
Thanks

Actually, after adding the following code it started working:
import spark.skins.spark.DropDownListSkin;
override public function stylesInitialized():void
      super.stylesInitialized();
      this.setStyle("skinClass", DropDownListSkin);

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"/>

Datagrid and combobox

Hi all,
I have two issues...
First is that my combobox in datagrid is not populating...
Here is the code:
private function openWindow():void
var testWindow:TitleWindow = new TitleWindow();
testWindow=TitleWindow(PopUpManager.createPopUp(this, test, true));
testWindow["Id"]=testDG.selectedItem.ID;
private function handle_returnTestAC(e:ResultEvent):void
testArray=ArrayCollection(e.result);
<mx:DataGrid
toolTip="Click for Description" id="testDG" dataProvider="{testAC}" doubleClickEnabled="true" eventClick="openWindow()">
<mx:columns>
<mx:DataGridColumn dataField="ID" headerText="ID" />
<mx:DataGridColumn dataField="Michigan_Produce" headerText="Michigan Produce" />
<mx:DataGridColumn headerText="Type" dataField="TypeName"> <mx:itemRenderer>
<mx:Component>
<mx:ComboBox prompt="Type" dataProvider="(testArray)" labelField="TypeName"/>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
If i call this combobox outside the Datagrid it works:
<mx:ComboBox id="cmb" dataProvider="{testAC}" labelField="TypeName" prompt="Type"/>
2. Problem is that how do I make "Type" DataGridColumn not double click enabled. as when I make a selection in the combobox it does not open the pop up...
I'll really appreciate any help... thanks...

1. Try dataProvider="{outerDocument.tesArray}"
2. I didn't understand the question

Change datagrid query from combobox

So I have a datagrid with a couple combo boxes down at the bottom. The combo boxes have static values. Based on the selection, I want the combo box to invoke the query in my CFC, passing the argument of what the selected value is. Then have the datagrid refresh with the new query.
Anyone passed by any tutorials for this type of thing?
I have seen some where you dump all the data to the grid and filter based on the combobox, but I would prefer to not have all of that overhead of pulling every record. I would like for the SQL to do the filtering based on the argument.
Thanks!

Are the comboboxes in the datagrid/itemrenderer or are they at the bottom of the container ?

ComboBox inside datagrid

Hi All,
Let me start with this issue again, maybe someone else can
help me.
I have a comboBox inside a datagrid, preview here in this
group somebody
show me how to create an event in my datagrid to do my
calculations
automatic.
My problem is that after select an Item in the comboBox I
have to click
somewhere else to fire the event.
Anybody have an idea or sugestion in how to fix this???
I will include my code below... tks in advance.
JFB
public function setDataPrice(event:DataGridEvent):void{
if(event.dataField == "serviceItemID") {
// Disable copying data back to the control.
event.preventDefault();
var chosenItem:Object =
ComboBox(event.currentTarget.itemEditorInstance.dataService_cb).selectedItem;
var chosenId:int = chosenItem.id;
acData[data_dg.selectedIndex].serviceItemID =
Number(chosenId);
acData[data_dg.selectedIndex].price =
chosenItem.serviceItemPrice;
acData[data_dg.selectedIndex].rate1000 =
chosenItem.serviceItemRate;
acData.refresh();
// Close the cell editor.
data_dg.destroyItemEditor();
// Notify the list control to update its display.
data_dg.dataProvider.notifyItemUpdate(data_dg.editedItemRenderer);
if(event.dataField == "qty") {
if (event.currentTarget.itemEditorInstance.text != ""){
acData[data_dg.selectedIndex].qty =
Number(event.currentTarget.itemEditorInstance.text);
acData.refresh();
<mx:DataGrid id="price_dg"
itemEditEnd="calculateRateTotal(event)" x="10"
y="32" width="590" height="147" editable="true">
<mx:columns>
<mx:DataGridColumn headerText="Quantity" dataField="qty"
labelFunction="formatNumber"/>
<mx:DataGridColumn headerText="Rate Type" dataField="id"
rendererIsEditor="true" editorDataField="dummy"
width="120">
<mx:itemRenderer>
<mx:Component>
<mx:VBox>
<mx:ComboBox id="rate_cb"
dataProvider="{outerDocument.acRate}"
labelField="label" width="120"/>
</mx:VBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>

Anybody else can help me with this.
Tks
JFB
"JFB" <[email protected]> wrote in message
news:[email protected]...
> Hi All,
> Let me start with this issue again, maybe someone else
can help me.
> I have a comboBox inside a datagrid, preview here in
this group somebody
> show me how to create an event in my datagrid to do my
calculations
> automatic.
> My problem is that after select an Item in the comboBox
I have to click
> somewhere else to fire the event.
> Anybody have an idea or sugestion in how to fix this???
> I will include my code below... tks in advance.
>
> JFB
>
> public function setDataPrice(event:DataGridEvent):void{
> if(event.dataField == "serviceItemID") {
> // Disable copying data back to the control.
> event.preventDefault();
>
> var chosenItem:Object =
>
ComboBox(event.currentTarget.itemEditorInstance.dataService_cb).selectedItem;
> var chosenId:int = chosenItem.id;
>
> acData[data_dg.selectedIndex].serviceItemID =
> Number(chosenId);
> acData[data_dg.selectedIndex].price =
> chosenItem.serviceItemPrice;
> acData[data_dg.selectedIndex].rate1000 =
> chosenItem.serviceItemRate;
> acData.refresh();
> //
>
> // Close the cell editor.
> data_dg.destroyItemEditor();
>
> // Notify the list control to update its display.
>
>
data_dg.dataProvider.notifyItemUpdate(data_dg.editedItemRenderer);
> }
>
> if(event.dataField == "qty") {
> if (event.currentTarget.itemEditorInstance.text != ""){
> acData[data_dg.selectedIndex].qty =
> Number(event.currentTarget.itemEditorInstance.text);
> acData.refresh();
> }
> }
>
> }
>
> <mx:DataGrid id="price_dg"
itemEditEnd="calculateRateTotal(event)" x="10"
> y="32" width="590" height="147" editable="true">
> <mx:columns>
> <mx:DataGridColumn headerText="Quantity"
dataField="qty"
> labelFunction="formatNumber"/>
> <mx:DataGridColumn headerText="Rate Type"
dataField="id"
> rendererIsEditor="true" editorDataField="dummy"
width="120">
> <mx:itemRenderer>
> <mx:Component>
> <mx:VBox>
> <mx:ComboBox id="rate_cb"
dataProvider="{outerDocument.acRate}"
> labelField="label" width="120"/>
> </mx:VBox>
> </mx:Component>
> </mx:itemRenderer>
> </mx:DataGridColumn>
>

Updating charts and datagrids based on selection

I am trying to find some documentation and samples explaining how I can pick something in a combobox and have it populate a series of datagrids and charts.
OUTLINE:
A. Using an XML table of all municipalities in our region populate a combobox. Then have the user select the municipality they are interested in.
B.Take a census table that is in XML format and by using HTTPServices read it into Flex and then based on what municipality the user selected populate a datagrid and variety of charts with data pertaining to the muni.
I know it is done because I see it all the time and took a class last week where it was shown. Unfortunately it was the last day of the class and time was running out so we just got a brief overview of this.
I would greatly appriciate anyone who can point me to samples and documentation whether it be online or in books. And I should mention that terminology is still an issue. Am I attempting to do a custom event or what?
The code below all works. What I mean I am successfully populating the combobox and the datagrid with the appropriate data. I am just not able to get the two communicating with each other. In other words the datagrid is showing the entire table and ignoring the combobox.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
creationComplete="initApp()">
<mx:Script>
<![CDATA[
   import mx.rpc.events.*;
   import mx.controls.*;
   import mx.charts.*;
   import mx.collections.*;
   [Bindable]
   private var acMuni:ArrayCollection = new ArrayCollection;
   [Bindable]
   private var acCity:ArrayCollection = new ArrayCollection;
   private function initApp():void {
    muniHS.send();
    cityHS.send();
   private function eHandler(e:ResultEvent):void {
    acMuni = e.result.GetAllMUNIS.MUNIS;
   private function fHandler(e:FaultEvent):void {
    var faultInfo:String="fault code: "+ e.fault.faultCode +"\n\n";
    faultInfo+="fault string: "+e.fault.faultString+"\n\n";
    mx.controls.Alert.show(faultInfo,"Fault Information");
    var eventInfo:String="event target: "+e.target+"\n\n";
    eventInfo+="event type: "+e.type+"\n\n";
    mx.controls.Alert.show(eventInfo,"Event Information");
   private function eCityHandler(e:ResultEvent):void {
    this.acCity = e.result.GetCITIES.CITIES;
]]>
</mx:Script>
<mx:HTTPService id="muniHS"
url="data/GetAllMunis.xml"
result="eHandler(event)"
fault="fHandler(event)"
showBusyCursor="true"/>
<mx:HTTPService id="cityHS"
url="data/CityNames.xml"
resultFormat="object"
result="eCityHandler(event)"
fault="fHandler(event)"
showBusyCursor="true"/>
<mx:Panel width="100%" height="50%"
paddingBottom="10"
paddingLeft="10"
paddingRight="10"
paddingTop="10" title="DataGrid">
<mx:ComboBox id="muniCB"
dataProvider="{acCity}"
prompt="Select a Municipality"
labelField="city"/>
<mx:DataGrid id="dg"
   width="100%"
   height="100%"
   dataProvider="{acMuni}">
   <mx:columns>
    <mx:DataGridColumn headerText="municipality" dataField="city"/>
    <mx:DataGridColumn dataField="year"/>
    <mx:DataGridColumn headerText="month" dataField="month_no"/>
    <mx:DataGridColumn headerText="labor force" dataField="laborforce"/>
    <mx:DataGridColumn dataField="employed"/>
    <mx:DataGridColumn dataField="unemployed"/>
    <mx:DataGridColumn headerText="unemployment rate" dataField="unemp_rate"/>
    <mx:DataGridColumn headerText="tract" dataField="geogkey"/>
    <mx:DataGridColumn headerText="extended tract" dataField="geogkeyx"/>
   </mx:columns>
</mx:DataGrid>
</mx:Panel>
</mx:Application>
Thanks for any help you can provide
Richard Krell

If this post answers your querstion or helps, please mark it as such.
First, use XMLListCollection for the data for the ConboBox and for the Muni result handler xlcMuni (instead of acMuni).
Here is a simplified version of your app with the answer. It uses e4x syntax for filtering.
http://livedocs.adobe.com/flex/3/html/help.html?content=13_Working_with_XML_03.html
--------------- CityNames.xml ----------------
<?xml version="1.0" encoding="utf-8"?>
<CITIES>
<city>Chicago</city>
<city>New York</city>
<city>Boston</city>
</CITIES>
---------- GetAllMunis.xml ------------
<?xml version="1.0" encoding="utf-8"?>
<MUNIS>
<muni>
    <city>Chicago</city>
    <year>1866</year>
</muni>
<muni>
    <city>New York</city>
    <year>1872</year>
</muni>
<muni>
    <city>Boston</city>
    <year>1756</year>
</muni>
</MUNIS>
------------- MainApp.mxml -------------------
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
creationComplete="muniHS.send();cityHS.send();">
<mx:Script>
    <![CDATA[
      import mx.events.ListEvent;
      import mx.rpc.events.*;
      import mx.controls.*;
      import mx.charts.*;
      import mx.collections.*;
      [Bindable] private var xlcMuni:XMLListCollection = new XMLListCollection;
      [Bindable] private var xlcCity:XMLListCollection = new XMLListCollection;
      [Bindable] private var xlcDG:XMLListCollection = new XMLListCollection;
      private function eHandler(e:ResultEvent):void {
        this.xlcMuni = new XMLListCollection(e.result..muni);
      private function eCityHandler(e:ResultEvent):void {
        this.xlcCity = new XMLListCollection(e.result.city);
      private function populateDG(evt:ListEvent):void{
        var temp:XMLList = xlcMuni.copy();
        xlcDG = new XMLListCollection(temp.(city == ComboBox(evt.currentTarget).selectedItem));
    ]]>
</mx:Script>
<mx:HTTPService id="muniHS" resultFormat="e4x"
    url="data/GetAllMunis.xml" useProxy="false"
    result="eHandler(event)"/>
<mx:HTTPService id="cityHS" url="data/CityNames.xml"
    resultFormat="e4x" result="eCityHandler(event)"/>
<mx:Panel width="100%" height="50%" title="DataGrid">
    <mx:ComboBox id="muniCB" dataProvider="{xlcCity}"
      prompt="Select a Municipality" labelField="city"
      change="populateDG(event)"/>
    <mx:DataGrid id="dg" width="100%" height="100%"
      dataProvider="{xlcDG}">
      <mx:columns>
        <mx:DataGridColumn headerText="municipality" dataField="city"/>
        <mx:DataGridColumn dataField="year"/>
      </mx:columns>
    </mx:DataGrid>
</mx:Panel>
</mx:Application>

Combo box in datagrid

Hello,
I have combobox in my datagrid, the combo box is as follow:
        <fx:Component id="inlineEditor">
            <mx:ComboBox >
                <mx:dataProvider>
                    <fx:String>MR. ONE</fx:String>
                    <fx:String>MR. TWO</fx:String>
                    <fx:String>MR. FOUR</fx:String>
                    <fx:String>MR. FIVE</fx:String>
                </mx:dataProvider>
            </mx:ComboBox>
        </fx:Component>
And my datagrid is;
    <mx:DataGrid id="dataGrid" editable="true" x="167" y="119" creationComplete="dataGrid_creationCompleteHandler(event)" dataProvider="{getAllResult.lastResult}">
        <mx:columns>
            <mx:DataGridColumn headerText="id" dataField="id" editable="false"/>
            <mx:DataGridColumn headerText="name" dataField="name"/>
            <mx:DataGridColumn headerText="surName" dataField="surName"
                               itemEditor="{inlineEditor}"
                               editorDataField="selectedItem" />
            <mx:DataGridColumn headerText="unitId" dataField="unitId"/>
            <mx:DataGridColumn headerText="datum" dataField="datum"
                               itemRenderer="mx.controls.DateField"
                               rendererIsEditor="true"
                               editorDataField="selectedDate"/>
            <mx:DataGridColumn headerText="company" dataField="company"
                               itemRenderer="mx.controls.CheckBox"
                               rendererIsEditor="true"
                               editorDataField="selected"/>
        </mx:columns>
    </mx:DataGrid>
Now this works fine with the values from the combobox. The issue here is that I need the combo box to be populated from a table/model, normaly I would use outside of the datagrid:
    <s:ComboBox x="138" y="399" id="comboBox" creationComplete="comboBox_creationCompleteHandler(event)" labelField="name">
        <s:AsyncListView list="{getAllResult2.lastResult}"/>
    </s:ComboBox>
And this would work fine. But how to use this combobox in the datagrid. I use LCSD for DMS.
All help is appriciated

I put the following code in that I took from samples:
Bindable]public var test:ArrayCollection;
private
function init():void
test =
new ArrayCollection([{label:"High", data:"high"},{label:
"Medium", data:"medium"},{label:
"Low", data:"low"}])
Then in the mxml:
<mx:DataGridColumn
headerText="From Fiscal Period">
<mx:itemRenderer>
<mx:Component>
<mx:ComboBox dataProvider="{test}">
</mx:ComboBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
I still get the same error: 1120: Access of undefined property test.

Flex Advanced DataGrid with dynamic grouping

Can we implement something similiar as in below link, using flex 3.
http://demos.telerik.com/aspnet-ajax/grid/examples/groupby/grouploadmodeclient/defaultcs.a spx
I am not sure if flex 3 allows grouping of columns based on drag - drop component. Plus how to show the pictorial view of grouped columns, same as in the above example.
Any help greatly appreciated.

This blog post seems to answer your question:
http://blog.flexgeek.in/2007/06/tips-tricks-adding-a-combobox-to-a-datagrid-header-as-head errenderer/
http://omalraj.com/2009/06/flex-datagrid-header-with-a-combobox-filter/
http://franto.com/custom-header-in-datagrid-part-2/
http://blogs.adobe.com/aharui/2007/03/thinking_about_item_renderers_1.html
If this post answers your question or helps, please mark it as such. Thanks!
http://www.stardustsystems.com
Adobe Flex Development and Support Services

ComboBox embedded in DataGrid

Similar Messages

Maybe you are looking for