CODEWITHSUNDEEP
actionscript-3apache-flexdatagridcombobox
Adam Parkin
Adam Parkin

Reputation: 18670

Actionscript Datagrid ItemEditor with different types than type of DataGridColumn value

I have a DataGrid where one column has a ComboBox as an item editor for one of the columns. The type of values in the ComboBox's dataProvider are different from the type of value that is stored in the cell being edited. How can I map the value returned by the item editor to the value in the cell. A complete example illustrating my problem:

<?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" 
               xmlns:mx="library://ns.adobe.com/flex/mx"
               creationComplete="init()">

    <fx:Script>
        <![CDATA[
        import mx.collections.ArrayCollection;

        [Bindable]
        private var items:ArrayCollection;

        [Bindable]
        public var foobar:ArrayCollection;

        private function init():void
        {
            items = new ArrayCollection();
            items.addItem({name : "Adam", abbrev: "ABCD"});
            items.addItem({name : "Frank", abbrev : "EFGH"});
            items.addItem({name:"Bob", abbrev:"ABCD"});

            foobar = new ArrayCollection();
            foobar.addItem({id:"ABCD", displayValue:"Adam Buys Cheap Drinks"});
            foobar.addItem({id:"EFGH", displayValue:"Eban Flies Great Heat"});
        }
        ]]>
    </fx:Script>
    <mx:DataGrid dataProvider="{items}" editable="true">
        <mx:columns>
            <mx:DataGridColumn headerText="Name" dataField="name" />
            <mx:DataGridColumn headerText="Abbrev" dataField="abbrev"
                               editorDataField="selectedItem">
                <mx:itemEditor>
                    <fx:Component>
                        <mx:ComboBox labelField="displayValue"
                                     dataProvider="{outerDocument.foobar}" />
                    </fx:Component>
                </mx:itemEditor>
            </mx:DataGridColumn>
        </mx:columns>
    </mx:DataGrid>
</s:Application>

What I want to see happen is that when the user picks an item from the ComboBox, that the id attribute of the value returned is placed in the cell being edited in the grid.

As it stands the id/displayValue object is passed instead, resulting in [object object] being displayed.

Upvotes: 0

Views: 619

Answers (2)

Crabar
Crabar

Reputation: 1857

In your case it will be enough to change editorDataField="selectedItem" to editorDataField="selectedLabel". If you want to have more complex itemEditor (for example, add some text automatically) than you can do next:

        <mx:DataGridColumn headerText="Abbrev" dataField="abbrev">
            <mx:itemEditor>
                <fx:Component>
                    <mx:ComboBox labelField="displayValue"
                                 dataProvider="{outerDocument.foobar}">
                        <fx:Script>
                            <![CDATA[
                            override public function get value():Object
                            {
                                return selectedLabel + "some example text";
                            }
                            ]]>
                        </fx:Script>
                    </mx:ComboBox>
                </fx:Component>
            </mx:itemEditor>
        </mx:DataGridColumn>

And last one - good article about itemEditors (most about it I took there). In method get value you can return anything and this will be shown on DataGrid.

Upvotes: 2

Petr Hrehorovsky
Petr Hrehorovsky

Reputation: 1153

You need to create own item editor based on ComboBox class and implement property that will return id of selected item. Something like this:

public function get selectedItemId():String {
    if (selectedItem) {
         return selectedItem.id;
    } else {
         return null;
    }
}

Then you should set this new property selectedItemId as editorDataField in DataGridColumn.

Upvotes: 1

Related Questions