16 Replies Latest reply on May 21, 2009 10:12 AM by Flex harUI

    Is it possible to use a Menu in an ItemEditor?

    Hillel Coren Level 1

      I'm trying to use a Menu in an ItemEditor, the problem is when I call menu.show() it causes the DataGrid to lose focus and destroy the ItemEditor.

       

      I've tried setting a handler for the itemEditEnd event and calling event.preventDefault() but no luck. It looks like in the DataGrid class if the event.reason is DataGridEventReason.OTHER it ignores the value of isDefaultPrevented.

       

      Thanks

        • 1. Re: Is it possible to use a Menu in an ItemEditor?
          ATIF FAROOQ Level 3

          hi,

             you can show Menu over the dataGrid at the position of the selected cell rather then showing Menu inside the itemEditor

          • 2. Re: Is it possible to use a Menu in an ItemEditor?
            Hillel Coren Level 1

            The problem with that approach is that the editor is no longer connected to the DataGrid. For example, pressing the Tab key will no longer move you to the next cell.

            • 3. Re: Is it possible to use a Menu in an ItemEditor?
              ATIF FAROOQ Level 3

              have you tried setting the focus to itemEditor after the menu Open event is dispatched in that case keyboard input will not work on Menu but user can select menuItem with mouse and tabbing will also work.

              • 4. Re: Is it possible to use a Menu in an ItemEditor?
                Hillel Coren Level 1

                The ItemEditor no longer exists as the DataGrid destroys it.

                • 5. Re: Is it possible to use a Menu in an ItemEditor?
                  Flex harUI Adobe Employee

                  What happens if you use PopUpMenuButton or a subclass of it?

                   

                  Alex Harui

                  Flex SDK Developer

                  Adobe Systems Inc.

                  Blog: http://blogs.adobe.com/aharui

                  • 6. Re: Is it possible to use a Menu in an ItemEditor?
                    Hillel Coren Level 1

                    I think my question was too specific. What I'm really trying to do is create an itemEditor containing a PopUp which when focused doesn't destroy the itemEditor. I found this article (http://www.colettas.org/?p=99) which seems to imply that the PopUp can get it's own focusManager but this doesn't seem to stop the DataGrid from destroying the itemEditor.

                     

                    Here's an example which demonstrates the problem. I'd like to be able to focus the TextInput created when clicking the button and not destroy the itemEditor.

                     

                    <?xml version="1.0" encoding="utf-8"?>
                    <mx:Application
                        xmlns:mx="http://www.adobe.com/2006/mxml"
                        verticalAlign="middle" horizontalAlign="center">
                       
                        <mx:Script>
                            <![CDATA[
                                import mx.collections.ArrayCollection;
                               
                                [Bindable]
                                private var _data:ArrayCollection = new ArrayCollection([{"name":"sam"},{"name":"bob"}]);           
                            ]]>
                        </mx:Script>
                       
                        <mx:Component id="editor">
                            <mx:HBox>
                           
                                <mx:Script>
                                    <![CDATA[
                                        import mx.core.IFlexDisplayObject;
                                        import mx.containers.HBox;
                                        import mx.managers.PopUpManager;
                                       
                                        public function get text():String
                                        {
                                            return textInput.text;
                                        }
                                       
                                        private function handleClick():void
                                        {
                                            var popUp:HBox = new HBox();
                                            var textInput:TextInput = new TextInput();
                                            popUp.addChild( textInput );
                                           
                                            PopUpManager.addPopUp( popUp, this, true );
                                            PopUpManager.centerPopUp( popUp );
                                        }
                                    ]]>
                                </mx:Script>
                           
                                <mx:TextInput id="textInput" text="{ data.name }"/>
                                <mx:Button width="16" height="16" click="handleClick()"/>
                            </mx:HBox>
                        </mx:Component>
                       
                        <mx:DataGrid dataProvider="{ _data }" editable="true" width="300" height="300">
                            <mx:columns>
                                <mx:DataGridColumn dataField="name" itemEditor="{ editor }"/>
                            </mx:columns>
                        </mx:DataGrid>
                               
                    </mx:Application>

                    • 7. Re: Is it possible to use a Menu in an ItemEditor?
                      Flex harUI Adobe Employee

                      Editors must implement IFocusManagerComponent

                       

                      Alex Harui

                      Flex SDK Developer

                      Adobe Systems Inc.

                      Blog: http://blogs.adobe.com/aharui

                      • 8. Re: Is it possible to use a Menu in an ItemEditor?
                        Hillel Coren Level 1

                        I've tried rewriting this example so that the editor implements IFocusManagerComponen but it doesn't prevent the itemEditor from being destroyed when the popUp recieves the focus.

                         

                        Is there something that I'm missing?

                         

                        Thanks for your help!

                        • 9. Re: Is it possible to use a Menu in an ItemEditor?
                          Flex harUI Adobe Employee

                          Did it solve the problem for the TextInput?  There might be yet another issue for popups that take focus.

                           

                          Alex Harui

                          Flex SDK Developer

                          Adobe Systems Inc.

                          Blog: http://blogs.adobe.com/aharui

                          • 10. Re: Is it possible to use a Menu in an ItemEditor?
                            Hillel Coren Level 1

                            Since the container for the editor is an HBox it already worked for the TextInput (HBox extends Container which implements IFocusManagerContainer). I think you're right that the PopUp introduces a different problem, any thoughts on how to work around it?

                            • 11. Re: Is it possible to use a Menu in an ItemEditor?
                              Flex harUI Adobe Employee

                              Not IFocusManagerContainer.   IFocusManagerComponent is required to handle switching focus to an editor.  I want to make sure you've correctly explored this requirement before I take the time to debug through this scenario.

                               

                              Alex Harui

                              Flex SDK Developer

                              Adobe Systems Inc.

                              Blog: http://blogs.adobe.com/aharui

                              • 12. Re: Is it possible to use a Menu in an ItemEditor?
                                Hillel Coren Level 1

                                Sorry for the mistake. I have tried it with IFocusManagerComponent but still no luck.

                                 

                                Thanks again for your time

                                 

                                 

                                <!-- TestApplications.mxml -->
                                <mx:Application
                                    xmlns:mx="http://www.adobe.com/2006/mxml"
                                    verticalAlign="middle" horizontalAlign="center">
                                  
                                    <mx:Script>
                                        <![CDATA[
                                            import mx.collections.ArrayCollection;
                                          
                                            [Bindable]
                                            private var _data:ArrayCollection = new ArrayCollection([{"name":"sam"},{"name":"bob"}]);          
                                        ]]>
                                    </mx:Script>
                                  
                                    <mx:DataGrid dataProvider="{ _data }" editable="true" width="300" height="300">
                                        <mx:columns>
                                            <mx:DataGridColumn dataField="name" itemEditor="TestEditor"/>
                                        </mx:columns>
                                    </mx:DataGrid>
                                          
                                </mx:Application>

                                 


                                <?xml version="1.0" encoding="utf-8"?>
                                <!-- TestEditor.mxml -->
                                <mx:HBox
                                    xmlns:mx="http://www.adobe.com/2006/mxml"
                                    implements="mx.managers.IFocusManagerComponent">
                                   
                                    <mx:Script>
                                        <![CDATA[
                                            import mx.managers.PopUpManager;
                                           
                                            public function get text():String
                                            {
                                                return "";
                                            }
                                           
                                            private function handleClick():void
                                            {
                                                var popUp:TestPopUp = new TestPopUp();
                                               
                                                PopUpManager.addPopUp( popUp, this, true );
                                                PopUpManager.centerPopUp( popUp );               
                                            }
                                        ]]>
                                    </mx:Script>
                                   
                                    <mx:Button click="handleClick()"/>
                                   
                                </mx:HBox>

                                 

                                 

                                <?xml version="1.0" encoding="utf-8"?>
                                <!-- TestPopUp.mxml -->
                                <mx:HBox
                                    xmlns:mx="http://www.adobe.com/2006/mxml"
                                    implements="mx.managers.IFocusManagerComponent">
                                   
                                    <mx:TextInput/>
                                   
                                </mx:HBox>

                                • 13. Re: Is it possible to use a Menu in an ItemEditor?
                                  Flex harUI Adobe Employee

                                  Here's how far I got:

                                   

                                  <mx:Application scriptTimeLimit="60" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"

                                       initialize="generateDataProvider()">

                                   

                                       <mx:Script>

                                            <![CDATA[

                                                 import mx.collections.ArrayCollection;

                                                  

                                                 

                                                 private var dp:ArrayCollection;

                                                  

                                                 private function generateDataProvider():void

                                                 {

                                                      var arr:Array = new Array();

                                                      arr.push({ first: 'Alex', last: 'Harui'});

                                                      arr.push();

                                                      dp = new ArrayCollection(arr);

                                                 }

                                                  

                                                 private var gotMenuHide:Boolean;

                                                 private function menuHideHandler(event:Event):void

                                                 {

                                                      trace("hide");

                                                      gotMenuHide = true;

                                                 }

                                   

                                                 private function cancelIfMenuDismissed(event:Event):void

                                                 {

                                                      trace("begin");

                                                      if (gotMenuHide)

                                                      {

                                                           trace("cancel");

                                                           gotMenuHide = false;

                                                           event.preventDefault();

                                                      }

                                                 }

                                            ]]>

                                       </mx:Script>

                                        

                                       <mx:DataGrid id="dataGrid" dataProvider="" editable="true"

                                                 initialize="dataGrid.addEventListener('menuHide', menuHideHandler)"

                                                 itemEditEnd="trace('ending')"

                                                 itemEditBeginning="cancelIfMenuDismissed(event)" >

                                            <mx:columns>

                                                 <mx:DataGridColumn headerText="First" dataField="first" itemEditor="MenuEditor"/>

                                                 <mx:DataGridColumn headerText="Last" dataField="last" itemEditor="MenuEditor"/>

                                            </mx:columns>

                                       </mx:DataGrid>

                                  </mx:Application

                                  • 14. Re: Is it possible to use a Menu in an ItemEditor?
                                    Hillel Coren Level 1

                                    Thanks for the update.

                                     

                                    Could you please post the code for the MenuEditor class.

                                    • 15. Re: Is it possible to use a Menu in an ItemEditor?
                                      Hillel Coren Level 1

                                      Hey, any progress on this issue?

                                       

                                      Thanks agan for your help

                                      • 16. Re: Is it possible to use a Menu in an ItemEditor?
                                        Flex harUI Adobe Employee

                                        Sorry:

                                         

                                        package 

                                        {

                                          import flash.events.Event;

                                          import flash.geom.Point;

                                          import mx.core.FlexSprite;

                                          import mx.managers.IFocusManagerComponent;

                                          import mx.controls.DataGrid;

                                          import mx.controls.Menu;

                                          import mx.controls.listClasses.IDropInListItemRenderer;

                                          import mx.controls.listClasses.IListItemRenderer;

                                          import mx.controls.listClasses.BaseListData;

                                          import mx.core.UIComponent;

                                         

                                          public class MenuEditor extends UIComponent implements IListItemRenderer, IDropInListItemRenderer, IFocusManagerComponent

                                          {

                                            public function MenuEditor ()

                                            {

                                         

                                            }

                                         

                                            private var menu:Menu;

                                         

                                            private var _text:String;

                                            public function get text():String

                                            {

                                                return _text;

                                            }

                                            public function set text(value:String):void

                                            {

                                                _text = value;

                                            }

                                         

                                            private var _data:Object;

                                            public function get data():Object

                                            {

                                                return _data;

                                            }

                                            public function set data(value:Object):void

                                            {

                                                _data = value;

                                                _text = listData.label;

                                            }

                                         

                                            private var _listData:BaseListData;

                                            public function get listData():BaseListData

                                            {

                                                return _listData;

                                            }

                                            public function set listData(value:BaseListData):void

                                            {

                                                _listData = value;

                                            }

                                         

                                            override protected function createChildren():void

                                            {

                                                super.createChildren();

                                                menu = Menu.createMenu(this, );

                                                menu.owner = this;

                                                menu.addEventListener("change", changeHandler);

                                            }

                                         

                                            override protected function updateDisplayList(w:Number, h:Number):void

                                            {

                                                super.updateDisplayList(w, h);

                                                var pt:Point = new Point(w, h);

                                                pt = localToGlobal(pt);

                                                menu.show(pt.x, pt.y);

                                            }

                                         

                                            override public function setFocus():void

                                            {

                                            }

                                         

                                            private function changeHandler(event:Event):void

                                            {

                                                _text = menu.selectedItem.toString();

                                                DataGrid(listData.owner).dispatchEvent(new Event("menuHide"));

                                                DataGrid(listData.owner).editedItemPosition = null;

                                            }

                                         

                                          }

                                        }

                                         

                                        Alex Harui

                                        Flex SDK Developer

                                        Adobe Systems Inc.

                                        Blog: http://blogs.adobe.com/aharui