How to handle pre-set value in Flex Combobox as selected item

Question

I'm facing a pretty basic but irksome problem with my Flex program.

To make the long story short, I've a DataGrid where in every row (you can already add and remove rows dinamically) there's a Combobox based on an ArrayCollection of elements ( responsabili ), every change to the Combobox already stores changes to the db. I want the Combobox to show the value loaded from the db as the selected value.

<s:Panel title="qqq" width="100%" height="100%" styleName="light">
    <s:layout>
        <s:VerticalLayout paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10" />
    </s:layout>
    <s:VGroup width="100%" height="100%">
        <mx:Text text="www" />
        <components:GraphicButton styleName="add" toolTip="Aggiungi elemento" id="aggCompito" click="aggCompito_clickHandler(event)"/>
        <s:DataGrid width="100%" height="100%" dataProvider="{MyModel.instance.compiti}" editable="true" gridItemEditorSessionSave="changeHandler(event)">
            <s:columns>
                <s:ArrayList>
                    <s:GridColumn headerText="Responsabile" editable="false" width="180">
                        <s:itemRenderer>
                            <fx:Component>
                                <s:GridItemRenderer>
                                    <fx:Script>
                                        <![CDATA[
                                        import it.aaa.frontend.model.MyModel;

                                        import mx.binding.utils.ChangeWatcher;
                                        import mx.collections.ArrayCollection;
                                        import mx.controls.Alert;
                                        import mx.core.FlexGlobals;
                                        import mx.events.CloseEvent;
                                        import mx.events.IndexChangedEvent;

                                        import spark.events.IndexChangeEvent;

                                        protected function changeHandler(event:IndexChangeEvent):void {
                                            data.responsabile = myResponsabile.selectedItem;
                                            // TODO Auto-generated method stub
                                            data.tipo = event.newIndex;
                                            dispatchEvent(new Event("compitiChange", true));
                                        }

                                        protected function responsabililabelFunc(item:Object):String {
                                            return String(item.cognome) + " " + String(item.nome);
                                        }

                                        protected function guessSelectedItem(item:Object):int {
                                            return item.responsabile.id;
                                        }

                                        ]]>
                                    </fx:Script>
                                    <s:HGroup>
                                        <s:ComboBox id="myResponsabile"
                                                    dataProvider="{MyModel.instance.responsabili}"
                                                    change="changeHandler(event)"
                                                    labelFunction="responsabililabelFunc"
                                                    selectedItem="{data.responsabile}"
                                                />
                                    </s:HGroup>
                                </s:GridItemRenderer>
                            </fx:Component>
                        </s:itemRenderer>
                    </s:GridColumn>
                </s:ArrayList>
            </s:columns>
        </s:DataGrid>
    </s:VGroup>
</s:Panel>

MyModel.as

public var responsabili:ArrayCollection; //initialized with actual ArrayCollection of "responsabili", with id, cognome, nome.

Answer 1

It will only work with selectedItem="{data.responsabile}" if you are using some actionscript classes as your data object and the property resposabile is marked as bindable:

[Bindable] public var responsabile:Object;

If you have just some generic objects as data, you will need to catch this up where data is set in your itemrenderer. So your GridItemRenderer needs another method:

override public function set data(value:Object):void
{
    super.data = value;

    // only do something if the data is set. When the renderer is destroyed the data will be null
    if (data)
    {
       myResponsabile.selectedItem = data.responsabile;
    }
}

I don't remember though if the data is set after all components (including your combobox) has been created or before that. So in case you will get a null pointer exception because myResponsabile is null at this point, it will get more complicated:

private var _myResponsabile:Object;
private var _myResponsabileChanged:Boolean;

override public function set data(value:Object):void
{
    super.data = value;

    // only do something if the data is set. When the renderer is destroyed the data will be null
    if (data)
    {
       _myResponsabile = data.responsabile;
       _myResponsabileChanged = true;
       invalidateProperties();
    }
}

override protected function commitProperties():void
{
    super.commitProperties();

    if(_myResponsabileChanged)
    {
        _myResponsabileChanged = false;
        myResponsabile.selectedItem = _myResponsabile;
    }
}