1 2 Previous Next 52 Replies Latest reply on Dec 7, 2011 9:04 AM by Code Girl

    Item Editor Combo Box

    Michelle5002

      I have a datagrid who has a datagrid Column which has an item editor which is a combo box. 

       

      When you normally select a combo box, the text area comes into focus and whatever text is in the text area is selected.

       

      However, under the conditions I am currently using the combo box, when you select the column, the combo box text area is visible but you have to click it one more time to get the text area active and or whatever text is in it selected.  Why is this and is there a property or event I can modify so that I do not have to click the column twice to get the combo box active?

        • 1. Re: Item Editor Combo Box
          Flex harUI Adobe Employee

          Mx or Spark dataGrid?

          • 2. Re: Item Editor Combo Box
            Michelle5002 Level 1

            MX Datagrid with Spark Combo Box.  I forget why I am using the MX datagrid.

            • 3. Re: Item Editor Combo Box
              DonMitchinson

              You can implement your own celleditor class extension if you want to trap the mousedown and mouseup events.

               

              See the article, example and sample code for the single click cell editor at

              http://blogs.adobe.com/dloverin/2011/05/single-click-editing-and-more.html

              • 4. Re: Item Editor Combo Box
                Flex harUI Adobe Employee

                What does the renderer look like?  Does it implement IFocusManagerComponent.  There are past discussions on item editors and IFocusManagerComponent

                • 5. Re: Item Editor Combo Box
                  Michelle5002 Level 1

                  I dont have a custom renderer.  WHen I click on it, It looks like a text box with a drop down button but not selected.  When I click it the second time the cursor displays and you can type in info.  But only after the second click.

                  • 6. Re: Item Editor Combo Box
                    DonMitchinson Level 2

                    Are you using the default combobox grid item editor or the spark one?

                     

                    In any case you'll need to customize.

                    • 7. Re: Item Editor Combo Box
                      Flex harUI Adobe Employee

                      Show the code where you set up the renderer.  A Spark ComboBox is not a valid MX DataGrid item editor without some customization.

                      • 8. Re: Item Editor Combo Box
                        Michelle5002 Level 1

                        mx:DataGrid

                          mx:Column

                            mx:DataGridColumn

                              mx:ItemEditor

                                fx:Component

                                  mx:Canvas

                                    s:ComboBox

                        • 9. Re: Item Editor Combo Box
                          Flex harUI Adobe Employee

                          In the future, please post the tags and their attributes.  I can’t tell from this what you have or haven’t used as attributes for these tags.

                           

                          It appears your renderer is based on mx:Canvas wrapping an s:ComboBox.  mx:Canvas is not an IFocusManagerComponent so it will have to be customized to implement IFocusManagerComponent and assign focus to the ComboBox.

                          • 10. Re: Item Editor Combo Box
                            Michelle5002 Level 1

                            Again, I am not implementing any renderer.  The attributes are assigning the dataprovider, assigning the default selection, assigning the prompt, and what to do when someone closes the combobox.  Do you suggest a better way? than how I am doing it now.  I only got this out of a book which I learned Flex from.

                            • 11. Re: Item Editor Combo Box
                              Flex harUI Adobe Employee

                              The pieces of code you posted shows a custom item editor based on canvas containing a dropdown.  It will have to implement IFocusManagerComponent in order to work properly.  If you post the full code for the datagrid column, that might make things more clear.

                              • 12. Re: Item Editor Combo Box
                                Michelle5002 Level 1

                                I thought you didnt like that I used the canvas before.

                                • 13. Re: Item Editor Combo Box
                                  Michelle5002 Level 1

                                  Also, I gave you the code for my previous question about the single column Datagrid but never heard back.  Are you looking for a better solution?  Or did you just want my code?

                                  • 14. Re: Item Editor Combo Box
                                    DonMitchinson Level 2

                                    Patience is a virtue, but I think you're extending the limits.

                                     

                                    If this is your code

                                    mx:DataGrid

                                      mx:Column

                                        mx:DataGridColumn

                                          mx:ItemEditor

                                            fx:Component

                                              mx:Canvas

                                                s:ComboBox

                                     

                                    then you have something that's not going to compile.

                                     

                                    It's a simple effort to select your DataGrid code, copy and paste it into a code block here.

                                    Other than doing that, it's pointless to ask for help.

                                     

                                    You probably don't know what kind of resource you have that's trying to help you.

                                    I'm a novice at this, but Alex has mastered the Datagrid and has gone above and beyond most of what you've seen in a beginner book.

                                     

                                    Give him a try - read his requests and try to respond with some thought.

                                    • 15. Re: Item Editor Combo Box
                                      Flex harUI Adobe Employee

                                      Actually, the new forum software requires that you use “wiki markup” so please use  {-c-o-d-e-} without the dashes before and after code snippets.

                                       

                                      It looks like someone else tried to help with the Single Column DataGrid post.  But the code there also was missing brackets and attributes.  If you still need help, update that thread with code that I can just copy, paste and run.

                                      • 16. Re: Item Editor Combo Box
                                        Michelle5002 Level 1

                                        No, I replied with a zip file directly from the email.  I can just copy and paste because the code is on my work computer and I tunnel in and it does not allow me to copy and paste to a separate computer.  So I have to type the code again.  SO it takes a little more time.  Also, I do not know who people are and so from my perspective, I started to feel maybe harUI just wanted code rather than help me.  Oh I know, I will login from the tunnel computer and paste it there. 

                                        • 17. Re: Item Editor Combo Box
                                          Michelle5002 Level 1

                                          {mx:DataGrid id="tablesDG" x="10" y="100" width="450" height="150"

                                          editable="true"

                                          dataProvider="{appDto.tables}"

                                          creationComplete="tablesDG_creationCompleteHandler(event)"}

                                          {mx:columns}

                                          {mx:DataGridColumn id="tableDC"

                                                headerText="Left Table"

                                                editable="true"

                                                dataField="table"

                                                labelFunction="tableFormat"

                                                editorDataField="value"

                                                width="150"}

                                          {mx:itemEditor}

                                          {fx:Component}

                                          {mx:Canvas}

                                          {fx:Script}

                                          {![CDATA[

                                          import mx.collections.ArrayCollection;

                                          import mx.controls.Alert;

                                          import mx.events.FlexEvent;

                                                                                              

                                          import spark.events.DropDownEvent;

                                          import spark.events.IndexChangeEvent;

                                          [Bindable]

                                          public var tableList:ArrayCollection;

                                                                      

                                          protected function cb_initializeHandler(event:FlexEvent):void

                                          {

                                          tableList = outerDocument.getTablesResult.lastResult;

                                          appTableDto = outerDocument.tablesDG.selectedItem as AppTableDto;

                                          tableDto = appTableDto.table;

                                          if (appTableDto != null && appTableDto.table != null)

                                          {

                                          var t:TableDto;

                                          for (var i:int = 0; i{tableList.length; i++)

                                          {

                                          t = tableList[i];

                                          if (appTableDto.table.id == t.id)

                                          {

                                          cb.selectedIndex = i;

                                          break;

                                          }

                                          }

                                          }

                                          }

                                                                                              

                                          public function get value():TableDto

                                          {

                                          return tableDto

                                          }

                                                                                              

                                                                                              

                                          protected function cb_closeHandler(event:DropDownEvent):void

                                          {

                                          if (cb.selectedIndex } -1)

                                          tableDto = cb.selectedItem as TableDto;

                                          }

                                                                                              

                                          protected function cbFocusOutEvent():void

                                          {

                                          Alert.show(" " + cb.selectedIndex);

                                          }

                                                                                              

                                          ]]}

                                          {/fx:Script}

                                          {fx:Declarations}

                                          {valueObjects:AppTableDto id="appTableDto"/}

                                          {valueObjects:TableDto id="tableDto"/}

                                          {/fx:Declarations}

                                          {s:ComboBox id="cb"

                                             width = "100%"

                                             dataProvider="{tableList}"

                                             prompt="{tableDto.name}"

                                             labelField="name"

                                             initialize="cb_initializeHandler(event)" 

                                             close="cb_closeHandler(event)"/}

                                          {/mx:Canvas}

                                          {/fx:Component}

                                          {/mx:itemEditor}

                                          {/mx:DataGridColumn}

                                          {/mx:columns}

                                          {/mx:DataGrid}

                                          • 18. Re: Item Editor Combo Box
                                            Michelle5002 Level 1

                                            Oh and as for the single column datagrid issue I was having, its the same code pretty much of what I have here but the differnece is the data structure.  I no longer have the code because I was having so much trouble,  and the code I put here is its replacement.  In MS SQL I have two tables with a third join table.  Originally, the first of the two tables was the parent which contained a list of the second the child though the child was really a lookup of the parent type.  Basically, I am mapping out how data tables are linked.  So when I had my first problem, it was a single column parent table type.  Since I could not get it to work how I liked, I ended up convincing JPA in my back end to give me a list of the join table which contained the second tables data, that way I could associate the grid column to a field of the list rather than the list of the table itself.  It kinda defeats how OO works but it did get the job done with encapsulation.  However, I still would like to figure this out or at least get Adobe to take into account for a list with only one field and be able to use a datagrid so we can use editors like a combo box.  Mainly because I do have some Many to Many relationships and having to made a list of the join tables there could get messy in JPA.  And a waste since JPA already will convert the Join table properly into Java OO classes without the join table included.  Which is really how my current example should be but isnot  since FB does not allow it without having to use the Outerdocument function to post the results to the Datagrid column itself of a single column class object.

                                            • 19. Re: Item Editor Combo Box
                                              Code Girl

                                              BTW, CodeGirl is my work login name and Michelle5002 is my home login name.

                                              • 20. Re: Item Editor Combo Box
                                                Code Girl Level 1

                                                I have tried to convert it to Spark stuff but am having troubles and no real good examples on how to do it

                                                 

                                                 

                                                {s:DataGrid id="tablesDG" x="10" y="100" width="450" height="150"

                                                editable="true"

                                                dataProvider="{appDto.tables}"

                                                creationComplete="tablesDG_creationCompleteHandler(event)"}

                                                {s:columns}

                                                {s:GridColumn id="tableDC"

                                                headerText="Left Table"

                                                editable="true"

                                                dataField="table"

                                                labelFunction="tableFormat"

                                                editorDataField="value"

                                                width="150"}

                                                {s:itemEditor}

                                                {fx:Component}

                                                {s:ComboBoxGridItemEditor}

                                                {fx:Script}

                                                {![CDATA[

                                                import mx.controls.Alert;

                                                import mx.events.FlexEvent;

                                                import spark.events.DropDownEvent;

                                                import spark.events.IndexChangeEvent;

                                                [Bindable]

                                                public var tableList:ArrayCollection;

                                                 

                                                protected function cb_initializeHandler(event:FlexEvent):void

                                                {

                                                tableList = outerDocument.getTablesResult.lastResult;

                                                appTableDto = outerDocument.tablesDG.selectedItem as AppTableDto;

                                                tableDto = appTableDto.table;

                                                if (appTableDto != null && appTableDto.table != null)

                                                {

                                                var t:TableDto;

                                                for (var i:int = 0; i{tableList.length; i++)

                                                {

                                                t = tableList[i];

                                                if (appTableDto.table.id == t.id)

                                                {

                                                cb.selectedIndex = i;

                                                break;

                                                }

                                                }

                                                }

                                                }

                                                 

                                                protected function cb_closeHandler(event:DropDownEvent):void

                                                {

                                                if (cb.selectedIndex } -1)

                                                tableDto = cb.selectedItem as TableDto;

                                                }

                                                 

                                                protected function cbFocusOutEvent():void

                                                {

                                                Alert.show(" " + cb.selectedIndex);

                                                }

                                                 

                                                ]]}

                                                {/fx:Script}

                                                {fx:Declarations}

                                                {valueObjects:AppTableDto id="appTableDto"/}

                                                {valueObjects:TableDto id="tableDto"/}

                                                {/fx:Declarations}

                                                {s:ComboBox

                                                width = "100%"

                                                prompt="{tableDto.name}"

                                                labelField="name"

                                                initialize="cb_initializeHandler(event)"

                                                close="cb_closeHandler(event)"/}

                                                {s:dataProvider}

                                                {s:ArrayCollection source="{tableList}"/}

                                                {/s:dataProvider}

                                                {/s:ComboBoxGridItemEditor}

                                                {/fx:Component}

                                                {/s:itemEditor}

                                                {/s:GridColumn}

                                                {/s:columns}

                                                {/s:DataGrid}

                                                • 21. Re: Item Editor Combo Box
                                                  Code Girl Level 1

                                                  Now I remember why I didnt use Spark Datagrid.  I spent my entire morning trying to get it to work and have found only very basic examples of how it works and not able to get it to work.  It just should not be this hard folks.

                                                  • 22. Re: Item Editor Combo Box
                                                    Flex harUI Adobe Employee

                                                    Getting a Spark component to work in an MX DataGrid is of medium difficulty.  The MX ComboBox is designed to work in MX DataGrid and the Spark ComboBoxItemEditor is designed to work with Spark DataGrid, but mixing takes some work.  There is a class called MXDataGridItemRenderer that might be a better base class to start from than Canvas.  See the doc.

                                                     

                                                    The code you posted seems to have curly braces instead of angle brackets.  I don’t know if your tools and editors and email is causing that problem or not, but I can’t work with code that takes a lot of time to fix up.  It is important if you need forum help to format and ask questions in an efficient manner, even if you have to upgrade your tools to help.

                                                     

                                                    A forum like this is high traffic and I only have so much time to help folks.  On a busy day, if I see that there is even one reply I won’t read the thread, so even updating a post is going to reduce your chances that I’ll read it.  Basically, you have to help us help you.

                                                    • 23. Re: Item Editor Combo Box
                                                      Code Girl Level 1

                                                      I was doing what you told me to do. 

                                                      • 24. Re: Item Editor Combo Box
                                                        Code Girl Level 1

                                                         

                                                        <mx:DataGrid id="tablesDG" x="10" y="100" width="450" height="150"

                                                        editable="true"

                                                        dataProvider="{appDto.tables}"

                                                        creationComplete="tablesDG_creationCompleteHandler(event)">

                                                        <mx:columns>

                                                        <mx:DataGridColumn id="tableDC"

                                                        headerText="Left Table"

                                                        editable="true"

                                                        dataField="table"

                                                        labelFunction="tableFormat"

                                                        editorDataField="value"

                                                        width="150">

                                                        <mx:itemEditor>

                                                        <fx:Component>

                                                        <mx:Canvas>

                                                        <fx:Script>

                                                        <![CDATA[

                                                        import mx.collections.ArrayCollection;

                                                        import mx.controls.Alert;

                                                        import mx.events.FlexEvent;

                                                         

                                                        import spark.events.DropDownEvent;

                                                        import spark.events.IndexChangeEvent;

                                                        [Bindable]

                                                        public var tableList:ArrayCollection;

                                                         

                                                        protected function cb_initializeHandler(event:FlexEvent):void

                                                        {

                                                        tableList = outerDocument.getTablesResult.lastResult;

                                                        appTableDto = outerDocument.tablesDG.selectedItem as AppTableDto;

                                                        tableDto = appTableDto.table;

                                                        if (appTableDto != null && appTableDto.table != null)

                                                        {

                                                        var t:TableDto;

                                                        for (var i:int = 0; i<tableList.length; i++)

                                                        {

                                                        t = tableList[i];

                                                        if (appTableDto.table.id == t.id)

                                                        {

                                                        cb.selectedIndex = i;

                                                        break;

                                                        }

                                                        }

                                                        }

                                                        }

                                                         

                                                        public function get value():TableDto

                                                        {

                                                        return tableDto

                                                        }

                                                         

                                                         

                                                        protected function cb_closeHandler(event:DropDownEvent):void

                                                        {

                                                        if (cb.selectedIndex > -1)

                                                        tableDto = cb.selectedItem as TableDto;

                                                        }

                                                         

                                                        protected function cbFocusOutEvent():void

                                                        {

                                                        Alert.show(" " + cb.selectedIndex);

                                                        }

                                                         

                                                        ]]>

                                                        </fx:Script>

                                                        <fx:Declarations>

                                                        <valueObjects:AppTableDto id="appTableDto"/>

                                                        <valueObjects:TableDto id="tableDto"/>

                                                        <!-- Place non-visual elements (e.g., services, value objects) here -->

                                                        </fx:Declarations>

                                                        <s:ComboBox id="cb"

                                                        width = "100%"

                                                        dataProvider="{tableList}"

                                                        prompt="{tableDto.name}"

                                                        labelField="name"

                                                        initialize="cb_initializeHandler(event)"

                                                        close="cb_closeHandler(event)"/>

                                                        </mx:Canvas>

                                                        </fx:Component>

                                                        </mx:itemEditor>

                                                        </mx:DataGridColumn>

                                                        </mx:columns>

                                                        </mx:DataGrid>

                                                        • 25. Re: Item Editor Combo Box
                                                          Code Girl Level 1

                                                          I changed the canvas to MXDataGridItemRenderer and the combo box did the exact same thing it was doing under canvas.

                                                          • 26. Re: Item Editor Combo Box
                                                            Code Girl Level 1

                                                            Bummer if you overlook me.  I work for Lockheed Martin.  Most programmers here are Microsoft ASP.NET programmers.  Lockheed Martin is very Microsoft.  I am trying to show them there might be a better way.

                                                            • 27. Re: Item Editor Combo Box
                                                              Flex harUI Adobe Employee

                                                              Forum participation for Adobe employees is voluntary, not mandatory.  I do it in my spare time to be helpful.  Therefore response time will vary, and on busy days, I might lose track of a thread.

                                                               

                                                              When asked a question, I will try to answer quickly.  When given a test case I have find a bit more time, then I will copy and paste it and try to get it to run.  If it doesn’t run, I will just stop.  I generally don’t have enough time to trying to fix up test cases.  To do so means that some other person won’t get their post looked at, and from experience, the missing pieces are often critical.

                                                               

                                                              I tried this test case and it couldn’t find the value objects.  I would prefer you update the test case to hard code the dataProvider.  The more files, the less likely I will find time to get it all set up and running.

                                                              • 28. Re: Item Editor Combo Box
                                                                Michelle5002 Level 1

                                                                Guess I will have to learn how to do that.  I have always used the value objects which were created when I gave Flash builder my wsdl file location for my stateless session bean

                                                                • 29. Re: Item Editor Combo Box
                                                                  Flex harUI Adobe Employee

                                                                  I would imagine the data objects aren’t critical to the test case, so you might be able to just replace the VO’s with Object and declare a dataProvider like this:

                                                                   

                                                                  <mx:DataGrid>
                                                                      <mx:dataProvider>
                                                                          <fx:Array>
                                                                              <fx:Object ...>
                                                                              <fx:Object ...>
                                                                      ...
                                                                  

                                                                   

                                                                  • 30. Re: Item Editor Combo Box
                                                                    Code Girl Level 1

                                                                    Okay so here is the code with value objects, I could not figure out how to do it without the vo being in a folder called valueObjects so you will need to put them in a folder.  This app shows both of my problems.  The Combobox not allowing you to select the text on the first click and how that I had to do a work around on a single column Grid to pass the results of the combo box to the dataprovider.  The issue is that the dataprovider is a one field table which is an object with only one relevant field for the app.  In this example you will notice I had to do some outerdocument posting for it to work.  The reason the datagrid fails is because there is no field but the entire object.  I think Adobe will need to fix this and here is my example.

                                                                     

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

                                                                    xmlns:mx="library://ns.adobe.com/flex/mx"

                                                                    xmlns:valueObjects="valueObjects.*"

                                                                    width="100%" height="100%">

                                                                    <fx:Script>

                                                                    <![CDATA[

                                                                    import valueObjects.ADto;

                                                                    import mx.collections.ArrayCollection;

                                                                    import mx.events.FlexEvent;

                                                                     

                                                                    protected function aCBLabel(item:Object):String

                                                                    {

                                                                    if (item != null)

                                                                    return item.name;

                                                                    else

                                                                    return "";

                                                                    }

                                                                     

                                                                    protected function bDG_creationCompleteHandler(event:FlexEvent):void

                                                                    {

                                                                    bDG.selectedIndex = 0;

                                                                    }

                                                                     

                                                                    protected function bFormat(item:BDto, column:DataGridColumn):String

                                                                    {

                                                                    if (item != null)

                                                                    return item.name;

                                                                    else

                                                                    return "";

                                                                    }

                                                                    ]]>

                                                                    </fx:Script>

                                                                    <fx:Declarations>

                                                                    <valueObjects:ADto id="aDto"/>

                                                                    <valueObjects:BDto id="bDto"/>

                                                                    <s:ArrayCollection id="aList">

                                                                    <valueObjects:ADto>

                                                                    <valueObjects:id>1</valueObjects:id>

                                                                    <valueObjects:name>a1</valueObjects:name>

                                                                    <valueObjects:bs>

                                                                    <valueObjects:BDto>

                                                                    <valueObjects:id>1</valueObjects:id>

                                                                    <valueObjects:name>b1</valueObjects:name>

                                                                    </valueObjects:BDto>

                                                                    <valueObjects:BDto>

                                                                    <valueObjects:id>2</valueObjects:id>

                                                                    <valueObjects:name>b2</valueObjects:name>

                                                                    </valueObjects:BDto>

                                                                    <valueObjects:BDto>

                                                                    <valueObjects:id>0</valueObjects:id>

                                                                    <valueObjects:name></valueObjects:name>

                                                                    </valueObjects:BDto>

                                                                    </valueObjects:bs>

                                                                    </valueObjects:ADto>

                                                                    <valueObjects:ADto>

                                                                    <valueObjects:id>2</valueObjects:id>

                                                                    <valueObjects:name>a2</valueObjects:name>

                                                                    <valueObjects:bs>

                                                                    <valueObjects:BDto>

                                                                    <valueObjects:id>3</valueObjects:id>

                                                                    <valueObjects:name>b3</valueObjects:name>

                                                                    </valueObjects:BDto>

                                                                    <valueObjects:BDto>

                                                                    <valueObjects:id>0</valueObjects:id>

                                                                    <valueObjects:name></valueObjects:name>

                                                                    </valueObjects:BDto>

                                                                    </valueObjects:bs>

                                                                    </valueObjects:ADto>

                                                                    </s:ArrayCollection>

                                                                    <s:ArrayCollection id="bList">

                                                                    <valueObjects:BDto>

                                                                    <valueObjects:id>1</valueObjects:id>

                                                                    <valueObjects:name>b1</valueObjects:name>

                                                                    </valueObjects:BDto>

                                                                    <valueObjects:BDto>

                                                                    <valueObjects:id>2</valueObjects:id>

                                                                    <valueObjects:name>b2</valueObjects:name>

                                                                    </valueObjects:BDto>

                                                                    <valueObjects:BDto>

                                                                    <valueObjects:id>3</valueObjects:id>

                                                                    <valueObjects:name>b3</valueObjects:name>

                                                                    </valueObjects:BDto>

                                                                    </s:ArrayCollection>

                                                                    </fx:Declarations>

                                                                    <fx:Binding source="aCB.selectedItem as ADto" destination="aDto"/>

                                                                    <s:Form id="AForm" width="700" height="170">

                                                                    <s:layout>

                                                                    <s:BasicLayout/>

                                                                    </s:layout>

                                                                    <s:HGroup x="0" y="50" width="670" height="60">

                                                                    <s:Label height="25" fontWeight="bold" text="Find an A" verticalAlign="middle"/>

                                                                    <s:ComboBox id='aCB'

                                                                    prompt="Enter or Select an A Name"

                                                                    labelFunction="aCBLabel"

                                                                    x="110" y="10" width="375">

                                                                    <mx:ArrayCollection id="asList" list="{aList}"/>

                                                                    </s:ComboBox>

                                                                    </s:HGroup>

                                                                    </s:Form>

                                                                    <mx:DataGrid id="bDG" x="10" y="140" width="450" height="200"

                                                                    editable="true"

                                                                    dataProvider="{aDto.bs}"

                                                                    creationComplete="bDG_creationCompleteHandler(event)">

                                                                    <mx:columns>

                                                                    <mx:DataGridColumn id="bNameDC"

                                                                    headerText="As Bs"

                                                                    editable="true"

                                                                    labelFunction="bFormat"

                                                                    editorDataField="value"

                                                                    width="150">

                                                                    <mx:itemEditor>

                                                                    <fx:Component>

                                                                    <mx:Canvas>

                                                                    <fx:Script>

                                                                    <![CDATA[

                                                                    import mx.collections.ArrayCollection;

                                                                    import mx.events.FlexEvent;

                                                                     

                                                                    import spark.events.DropDownEvent;

                                                                    [Bindable]

                                                                    public var bs:ArrayCollection;

                                                                     

                                                                    protected function sdd_InitializeHandler(event:FlexEvent):void

                                                                    {

                                                                    bs = outerDocument.bList;

                                                                    bDto = outerDocument.bDG.selectedItem as BDto;

                                                                    if (bDto != null)

                                                                    {

                                                                    var t:BDto;

                                                                    for (var i:int = 0; i<bs.length; i++)

                                                                    {

                                                                    t = bs[i];

                                                                    if (bDto.id == t.id)

                                                                    {

                                                                    ddl.selectedIndex = i;

                                                                    break;

                                                                    }

                                                                    }

                                                                    }

                                                                    }

                                                                     

                                                                    public function get value():BDto

                                                                    {

                                                                    return bDto

                                                                    }

                                                                     

                                                                     

                                                                    protected function ddl_closeHandler(event:DropDownEvent):void

                                                                    {

                                                                    bDto = ddl.selectedItem as BDto;

                                                                    outerDocument.aDto.bs[outerDocument.bDG.selectedIndex] = bDto;

                                                                    }

                                                                     

                                                                    ]]>

                                                                    </fx:Script>

                                                                    <fx:Declarations>

                                                                    <valueObjects:BDto id="bDto"/>

                                                                    <!-- Place non-visual elements (e.g., services, value objects) here -->

                                                                    </fx:Declarations>

                                                                    <s:ComboBox id="ddl"

                                                                    width = "100%"

                                                                    prompt="{bDto.name}"

                                                                    dataProvider="{bs}"

                                                                    labelField="name"

                                                                    initialize="sdd_InitializeHandler(event)"

                                                                    open="ddl.skin['dropDown'].owner = this"

                                                                    close="ddl_closeHandler(event)">

                                                                    </s:ComboBox>

                                                                    </mx:Canvas>

                                                                    </fx:Component>

                                                                    </mx:itemEditor>

                                                                    </mx:DataGridColumn>

                                                                    </mx:columns>

                                                                    </mx:DataGrid>

                                                                    </s:Application>

                                                                     

                                                                    {code}

                                                                     

                                                                    ADto

                                                                    {code}

                                                                     

                                                                    package valueObjects

                                                                    {

                                                                    import com.adobe.fiber.services.IFiberManagingService;

                                                                    import com.adobe.fiber.valueobjects.IValueObject;

                                                                    import mx.collections.ArrayCollection;

                                                                    import valueObjects.BDto;

                                                                    import com.adobe.fiber.core.model_internal;

                                                                     

                                                                    use namespace model_internal;

                                                                     

                                                                    public class ADto implements com.adobe.fiber.valueobjects.IValueObject

                                                                    {

                                                                    private var _internal_id : int;

                                                                    private var _internal_name : String;

                                                                    private var _internal_bs : ArrayCollection;

                                                                    model_internal var _internal_bs_leaf:valueObjects.BDto;

                                                                     

                                                                    public function ADto()

                                                                    {

                                                                    }

                                                                     

                                                                    public function get id() : int

                                                                    {

                                                                    return _internal_id;

                                                                    }

                                                                     

                                                                    public function get name() : String

                                                                    {

                                                                    return _internal_name;

                                                                    }

                                                                     

                                                                    public function get bs() : ArrayCollection

                                                                    {

                                                                    return _internal_bs;

                                                                    }

                                                                     

                                                                    public function set id(value:int) : void

                                                                    {

                                                                    var oldValue:int = _internal_id;

                                                                    if (oldValue !== value)

                                                                    {

                                                                    _internal_id = value;

                                                                    }

                                                                    }

                                                                     

                                                                    public function set name(value:String) : void

                                                                    {

                                                                    var oldValue:String = _internal_name;

                                                                    if (oldValue !== value)

                                                                    {

                                                                    _internal_name = value;

                                                                    }

                                                                    }

                                                                     

                                                                    public function set bs(value:*) : void

                                                                    {

                                                                    var oldValue:ArrayCollection = _internal_bs;

                                                                    if (oldValue !== value)

                                                                    {

                                                                    if (value is ArrayCollection)

                                                                    {

                                                                    _internal_bs = value;

                                                                    }

                                                                    else if (value is Array)

                                                                    {

                                                                    _internal_bs = new ArrayCollection(value);

                                                                    }

                                                                    else if (value == null)

                                                                    {

                                                                    _internal_bs = null;

                                                                    }

                                                                    else

                                                                    {

                                                                    throw new Error("value of bs must be a collection");

                                                                    }

                                                                    }

                                                                    }

                                                                     

                                                                    private var _managingService:com.adobe.fiber.services.IFiberManagingService;

                                                                     

                                                                    public function set managingService(managingService:com.adobe.fiber.services.IFiberManagingService):void

                                                                    {

                                                                    _managingService = managingService;

                                                                    }

                                                                    }

                                                                    }

                                                                    {code}

                                                                     

                                                                    BDto

                                                                    {code}

                                                                     

                                                                    package valueObjects

                                                                    {

                                                                    import com.adobe.fiber.services.IFiberManagingService;

                                                                    import com.adobe.fiber.valueobjects.IValueObject;

                                                                    import mx.collections.ArrayCollection;

                                                                    import com.adobe.fiber.core.model_internal;

                                                                    use namespace model_internal;

                                                                    public class BDto implements com.adobe.fiber.valueobjects.IValueObject

                                                                    {

                                                                    private var _internal_id : int;

                                                                    private var _internal_name : String;

                                                                    private static var emptyArray:Array = new Array();

                                                                    public function BDto()

                                                                    {

                                                                    }

                                                                    public function get id() : int

                                                                    {

                                                                    return _internal_id;

                                                                    }

                                                                    public function get name() : String

                                                                    {

                                                                    return _internal_name;

                                                                    }

                                                                    public function set id(value:int) : void

                                                                    {

                                                                    var oldValue:int = _internal_id;

                                                                    if (oldValue !== value)

                                                                    {

                                                                    _internal_id = value;

                                                                    }

                                                                    }

                                                                    public function set name(value:String) : void

                                                                    {

                                                                    var oldValue:String = _internal_name;

                                                                    if (oldValue !== value)

                                                                    {

                                                                    _internal_name = value;

                                                                    }

                                                                    }

                                                                    private var _managingService:com.adobe.fiber.services.IFiberManagingService;

                                                                    public function set managingService(managingService:com.adobe.fiber.services.IFiberManagingService):void

                                                                    {

                                                                    _managingService = managingService;

                                                                    }

                                                                    }

                                                                    }

                                                                    {code}

                                                                    • 31. Re: Item Editor Combo Box
                                                                      Flex harUI Adobe Employee

                                                                      This test case makes no attempt of my recommendation to implement IFocusManagerComponent on the editor.  Once I added that, it seemed to work as I would expect.

                                                                       

                                                                      DataGrid is not designed to edit/replace entire objects in the dataProvider.  I would use mx:List for that.  If you need a header, I’d just put in a button on top.  That will be much lighterweight than a whole DataGrid.

                                                                      DataGrid has an itemEditEnd event you can catch to override how editor information is saved.  That should eliminate the need for the outerDocument code.  The default behavior is to save to the dataField.  When you use labelFunction, there is no way to guess what field to save to so using itemEditEnd is pretty much required.

                                                                       

                                                                      Not to single you out, but also for others who read most of the posts: once I had a test case, I only spent 5 minutes getting it to compile and 2 minutes getting it to work.  That’s why a good succinct test case is important and saves everyone time.

                                                                      • 32. Re: Item Editor Combo Box
                                                                        Michelle5002 Level 1

                                                                        Correct me if I am wrong but Lists do not allow item editors that are combo boxes.  This is why I am using a Data grid instead of a List.  If I am wrong, fine.  But if not, then there still is a problem. 

                                                                         

                                                                        And I appreciate that you know how to implement IFocusManagerComponent but it would be nice if you shared that knowledge.  I may have forgotten to replace canvas in the example but I did replace it in my real app with the MXDataGridItemRenderer as you suggested and it didnt work.  So forgive me for not remembering it when I spent my time creating a test case for you and repay me by actually providing an example of how to get the Combobox to work on the first click and not the second.

                                                                        • 33. Re: Item Editor Combo Box
                                                                          Flex harUI Adobe Employee

                                                                          My changes look like this:

                                                                           

                                                                                          <mx:itemEditor>
                                                                                             <fx:Component>
                                                                                                 <mx:Canvas implements="mx.managers.IFocusManagerComponent">
                                                                                                     <fx:Script>
                                                                                                         <![CDATA[
                                                                                                              override public function setFocus():void
                                                                                                             {
                                                                                                                  ddl.setFocus();
                                                                                                              }
                                                                          
                                                                          

                                                                           

                                                                          1 person found this helpful
                                                                          • 34. Re: Item Editor Combo Box
                                                                            Michelle5002 Level 1

                                                                            Actually, it turns out I didnt need to do that either.  I added a Creation complete function and in the function I set the focus on the combo box and that fixed it.  I found this fix while searching on IFocusManagerCompoonent.  The person gave an example and then said that if all you really wanted was the focus then why not add it to the component in the creation complete function.  I tried it and it worked.

                                                                            • 35. Re: Item Editor Combo Box
                                                                              Flex harUI Adobe Employee

                                                                              Sometimes hacks work, sometimes they fall apart later on.  The focus subsystem might screw up later.  Good luck.

                                                                              • 36. Re: Item Editor Combo Box
                                                                                Michelle5002 Level 1

                                                                                So you feel setting the focus on the combo box after creation is a hack and not a good idea?

                                                                                • 37. Re: Item Editor Combo Box
                                                                                  Flex harUI Adobe Employee

                                                                                  Yes, because focus is no longer established within an IFocusManagerComponent.  It might work in this case because the editor is re-instantiated in every session, but if you ever decided to use a “rendererIsEditor” configuration, then I wouldn’t expect it to work.

                                                                                  • 38. Re: Item Editor Combo Box
                                                                                    Michelle5002 Level 1

                                                                                    Any other things like this we should know about DataGrids or anything else flex/flash related?

                                                                                    • 39. Re: Item Editor Combo Box
                                                                                      Flex harUI Adobe Employee

                                                                                      I think there are nuances to any framework  or platform.  We try to do the best we can in the official doc, and the main reason I have a blog and participate in the forums is to help folks navigate around those subtleties.

                                                                                      1 2 Previous Next