13 Replies Latest reply on Feb 4, 2012 1:29 AM by swatihiyer

    itemEditEnd called multiple times

    Balki333
      Hi.
      Am using a datagrid and using an item editor and item render for that. Item Renderer --> To give background color and Item Editor - to show a date picker. While implementing this, my need is to open a popup when we enter date. But, am getting the popup thrice , sometimes during "on change"  and sometimes, when I press "Enter" or "Tab out" . When analyzed further, I noticed that itemEditEnd event is called thrice.

       

      Can anyone let me know the alternative for this please ?

       

      Here is my code.

       

               
      <mx:AdvancedDataGrid width="1000" height="300" horizontalScrollPolicy="auto"
              id="dProvider" creationComplete="init()" verticalScrollPolicy="auto" editable="true" itemEditBeginning="checkIfAllowed(event)" selectionMode="singleCell" itemEditEnd="onEditEnd(event)">
            

       

                              private function onEditEnd(event:AdvancedDataGridEvent):void
                              {
                                           var oTaskPopupObj:TaskPopUp = new TaskPopUp();
                              PopUpManager.addPopUp(oTaskPopupObj,this,true);
                                                          //This part is called thrice !!!
                                            }
      I have been struggling to get rid of this issue. Would be very happy if I get a help quickly !
      Thanks
      Bala

       

        • 1. Re: itemEditEnd called multiple times
          danny_run

          Hello. This is not the best solution but in the TaskPopUp you can declare a: public static var isPopUpShown:Boolean =false;

          Then edit:     private function onEditEnd(event:AdvancedDataGridEvent):void
                                  {

                                                if(!TaskPopUp.isPopUpShown) {

                                                TaskPopUp.isPopUpShown=true;
                                               var oTaskPopupObj:TaskPopUp = new TaskPopUp();
                                  PopUpManager.addPopUp(oTaskPopupObj,this,true);
                                                              //This part is called thrice !!!

                                                    }
                                                }

          Also when you close the popUp you need to make the isPopUpShown false. I repeat this may not be the best solution but i didn't worked with the advanceddatagrid onEditEnd and i cann't tell you what is causing the problem.

          • 2. Re: itemEditEnd called multiple times
            Balki333 Level 1

            Thanks for the reply Danny, But am still looking for an apt solution.

             

            Can any one help me out on this issue. It is not only about opening popup's, but there are also other things that are dependent on this particular event. If this is a defect, then please let me know whether this needs to be reported/tracked somewhere.

             

            Thanks

            Bala

            • 3. Re: itemEditEnd called multiple times
              Flex harUI Adobe Employee

              With popups, focus goes away from the DG and ends the edit session.  There are some examples of how to do popups from DG on my blog.

               

              Alex Harui

              Flex SDK Developer

              Adobe Systems Inc.

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

              • 4. Re: itemEditEnd called multiple times
                Balki333 Level 1

                Hi Alex,

                I guess, you have mis-understood my question. Actually, the problem is not with the popup. It is with the itemEditEvent being called 3 times. Please read my initial post.

                 

                Waiting for your reply

                Thanks

                • 5. Re: itemEditEnd called multiple times
                  Flex harUI Adobe Employee

                  Unless you wire up the popup correctly, it will cause itemEditEnd to fire at least once.

                   

                  Alex Harui

                  Flex SDK Developer

                  Adobe Systems Inc.

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

                  • 6. Re: itemEditEnd called multiple times
                    Balki333 Level 1

                    Hi Alex,

                    Again, the question is not about popups. It is about itemEditEnd being called multiple times. I have given popup just for an example. Assume, I do a data validation or date validation, upon entering date value. In this case, How can I stop itemEditEnd event being called thrice ?

                     

                    Thanks

                    Bala

                    • 7. Re: itemEditEnd called multiple times
                      Flex harUI Adobe Employee

                      If you have a simple test case with no popups, do you see itemEditEnd being called multiple times?

                       

                      Alex Harui

                      Flex SDK Developer

                      Adobe Systems Inc.

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

                      • 8. Re: itemEditEnd called multiple times
                        Balki333 Level 1

                         

                         

                        Thanks for being patient and answering my questions.

                         

                        And yes, the itemEditEnd is called multiple times, even for other scenarios. Find below a sample code, where-in,  iam using date editor to validate the field entered. Here too, the itemEditEnd is called thrice( you can notice that the alert creeps up thrice). Let me know if you need anything else

                         

                        Main mxml

                        [[

                         

                        [Bindable]

                         

                         

                        private var compManDataDef:XML =

                        <CompManData>

                        <row>

                        <Phase>Program Start</Phase>

                        <Date>Plan</Date>

                        <Gate>Enter Date</Gate>

                        <WBP>TBD</WBP>

                        </row>

                        <row>

                        <Phase></Phase>

                        <Date>Actual</Date>

                        <Gate>TBD</Gate>

                        <WBP>TBD</WBP>

                        </row>

                         

                         

                        private function onEditEnd(event:AdvancedDataGridEvent):void

                        {

                         

                        Alert.show("in date validate");

                        }

                         

                         

                        <mx:AdvancedDataGrid width="100%" height="72%" horizontalScrollPolicy="auto"

                        id="

                        dProvider" creationComplete="init()" dragEnabled="true" lockedColumnCount="5" editable="true" itemEditBeginning="checkIfAllowed(event)" selectionMode="singleCell" itemEditEnd="onEditEnd(event)">

                         

                        <mx:columns>

                         

                        <mx:AdvancedDataGridColumn

                        dataField="

                        Phase"

                        headerText="" width="

                        137" wordWrap="true" textAlign="center" itemRenderer="renderer.ColorwithLable" editable="false">

                         

                        </mx:AdvancedDataGridColumn>

                         

                        <mx:AdvancedDataGridColumn

                        dataField="

                        Date"

                        headerText="" width="

                        120" itemRenderer="renderer.ColorwithLable" editable="false"/>

                         

                        <mx:AdvancedDataGridColumn

                        id="

                        Gate" dataField="Gate"

                        headerText="

                        Gate" width="120" editorDataField="newEmployeeType" labelFunction="dglfFormatDate" itemEditor="dateEditing" itemRenderer="renderer.ColorwithLable" />

                         

                        <mx:AdvancedDataGridColumn

                        id="

                        WBP" dataField="WBP"

                        headerText="

                        WBP" width="120" itemRenderer="renderer.ColorwithLable"/>

                        </mx:AdvancedDataGrid>

                         

                        editingDate.mxml......

                         

                        <?xml version="1.0" encoding="utf-8"?>

                        <mx:HBox

                         

                        xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="initMe()" >

                        <mx:Script>

                        <![CDATA[

                         

                        import mx.managers.PopUpManager;

                         

                        import mx.controls.dataGridClasses.DataGridColumn;

                         

                        import mx.controls.advancedDataGridClasses.AdvancedDataGridColumn;

                         

                        import mx.controls.AdvancedDataGrid;

                         

                        import mx.controls.advancedDataGridClasses.AdvancedDataGridListData;

                         

                        [

                        Bindable]

                         

                        public var tempVal:String = "";

                         

                        public var newEmployeeType:String = "";

                         

                        public var newEmployeeType1:String = "";

                         

                         

                        private function dateChanged(date:Date):void {

                         

                        if (date == null)

                        newEmployeeType =

                        "";

                         

                        else

                        newEmployeeType = (date.getMonth()+1).toString() +

                        '/' + date.getDate().toString() + '/' + date.getFullYear().toString() ;

                        }

                         

                        private function initMe():void

                        {

                        tempVal = data.Gate;

                        if (tempVal != null) {

                        dateField1.text =tempVal.toString();

                        }

                        }

                        ]]>

                        </mx:Script>

                        <mx:DateField

                         

                        id="dateField1" yearNavigationEnabled="true" change="dateChanged(DateField(event.target).selectedDate)"/>

                        </mx:HBox

                         

                        >

                         

                        • 9. Re: itemEditEnd called multiple times
                          Flex harUI Adobe Employee

                          Alert is a popup and will cause excessive itemEditEnd messages.  You would have to use trace statements on a simple test case or log to a Text or TextArea to have a valid test.

                           

                          Alex Harui

                          Flex SDK Developer

                          Adobe Systems Inc.

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

                          • 10. Re: itemEditEnd called multiple times
                            Balki333 Level 1

                            Hi Alex

                            The problem is still there, When I press enter, the method is called twice atleast..now. I checked this by giving trace(). The output came twice. We need to analyze on why it is called this many times and concentrate on this, rather than going away from the topic.

                            • 11. Re: itemEditEnd called multiple times
                              aduenas

                              I notice that if you use an alert box inside of the itemeditend event it fires twice but if you use a simple trace or write out to a text area its only called once..weird. Not sure if i'm doing something wrong.

                               

                              <?xml version="1.0" encoding="utf-8"?>

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

                              creationComplete="init()" creationPolicy="all">

                              <mx:XML xmlns="" id="xmlSource">

                              <root>

                              <item>

                              <name>car</name>

                                  <description>faster vroom wheels</description>

                                  <price>300.00</price>

                              </item>

                              <item>

                              <name>computer</name>

                              <description>chips, fast small</description>

                              <price>100.00</price>

                              </item>

                              </root>

                              </mx:XML>

                              <mx:XMLListCollection id="xmlList" source="{xmlSource.item}"/>

                              <mx:Script>

                              <![CDATA[

                              import mx.collections.ArrayCollection;

                              import mx.controls.Alert;

                              import mx.events.AdvancedDataGridEvent;

                              import mx.events.DataGridEvent;

                               

                              public function init():void

                              {

                              adg1.dataProvider = xmlList;

                              //dg2.dataProvider = xmlList;

                              dg0.dataProvider = eventColl;

                               

                              }

                              public function itemEndEditADG(event:AdvancedDataGridEvent):void

                              {

                              addEvent(event);

                              //Alert.show(event.toString());

                              writeToTraceLog("[itemEndEditADG]: "+event.toString());

                              }

                              public function itemEndEditDG2(event:DataGridEvent):void

                              {

                              addEvent(event);

                              //Alert.show(event.toString());

                              writeToTraceLog("[itemEndEditDG2]: "+event.toString());

                              }

                               

                              public function itemEndEditDG(event:DataGridEvent):void

                              {

                              addEvent(event);

                              writeToTraceLog("[itemEndEditDG]: "+event.toString());   

                                  Alert.show(event.toString(),"test");

                              }

                              public function addEvent(event:Event):void

                              {

                              eventColl.addItem(event);

                              }

                              public function clear():void

                              {

                              eventColl = new ArrayCollection();

                              }

                              public function writeToTraceLog(message:String):void

                              {

                              txtArea.text += message+"\n";

                              }

                              public function clearTrace():void

                              {

                              txtArea.text = "";

                              }

                               

                              ]]>

                              </mx:Script>

                              <mx:ArrayCollection id="eventColl"/>

                              <mx:AdvancedDataGrid x="10" y="10" id="adg1" designViewDataType="flat"

                              itemEditEnd="itemEndEditADG(event)"

                              editable="true" height="215">

                              <mx:columns>

                              <mx:AdvancedDataGridColumn dataField="name" editable="false"/>

                                <mx:AdvancedDataGridColumn dataField="description" editable="false"/>

                              <mx:AdvancedDataGridColumn dataField="price" editable="true"/>

                              </mx:columns>

                              </mx:AdvancedDataGrid>

                               

                                  <mx:DataGrid x="320" y="10" height="94" id="dg1"

                              itemEditEnd="itemEndEditDG(event)"

                              itemEditBegin="addEvent(event)"

                              itemEditBeginning="addEvent(event)"

                              dataProvider="{xmlList}"

                                  editable="true" width="400">

                              <mx:columns>

                                  <mx:DataGridColumn dataField="name" editable="false"/>

                              <mx:DataGridColumn dataField="description" editable="false"/>

                              <mx:DataGridColumn dataField="price" editable="true"/>

                              </mx:columns>

                              </mx:DataGrid>

                               

                              <mx:DataGrid x="320" y="112" height="113" id="dg2"

                              itemEditEnd="itemEndEditDG2(event)"

                              itemEditBegin="addEvent(event)"

                              itemEditBeginning="addEvent(event)"

                              dataProvider="{xmlList}"

                              editable="true" width="400">

                              <mx:columns>

                                  <mx:DataGridColumn dataField="name" editable="false"/>

                              <mx:DataGridColumn dataField="description" editable="false"/>

                              <mx:DataGridColumn dataField="price" editable="true"/>

                              </mx:columns>

                              </mx:DataGrid>

                              <mx:TabNavigator y="253" height="301" left="10" right="10">

                              <mx:Canvas label="Event Log" width="100%" height="100%">

                              <mx:DataGrid height="248" id="dg0"

                              editable="true"

                              dataProvider="{eventColl}" left="10" right="10" bottom="10">

                              <mx:columns>

                                      <mx:DataGridColumn dataField="columnIndex" />

                                      <mx:DataGridColumn dataField="dataField" />

                                      <mx:DataGridColumn dataField="itemRenderer" />

                                      <mx:DataGridColumn dataField="reason" />

                                      <mx:DataGridColumn dataField="rowIndex" />

                                      <mx:DataGridColumn dataField="type" />

                                  </mx:columns>

                              </mx:DataGrid>

                              </mx:Canvas>

                              <mx:Canvas label="Trace Log" width="100%" height="100%">

                              <mx:TextArea id="txtArea" top="10" bottom="10" left="10" right="10"/>

                              </mx:Canvas>

                              </mx:TabNavigator>

                               

                              <mx:Button x="608" y="233" label="Clear Trace Log" click="clearTrace();"/>

                              <mx:Button x="486" y="233" label="Clear Event Log" click="clear();"/>

                               

                              </mx:Application>

                              • 12. Re: itemEditEnd called multiple times
                                Justin Daily Level 1

                                I don't know if this will help or not, but I was having the same problem earlier today.  I had an itemEditEnd event that fired twice, producing two identical popups, one over the other.  When I added a trace to the itemEditEnd handler, I found out that each instance of itemEditEnd had a different DataGridEventReason.  The first instance was "other" and the second instance was 'newColumn".  So, I edited the alert function to only fire if the event.reason was DataGridEventReason.NEW_COLUMN and it works beautifully.

                                 

                                In the following example, I just wanted to show an alert if someone had entered in a number greater than 2000 in the cell at column 8 on my dataGrid.  I hope this helps:

                                 

                                protected function obsGrid_itemEditEndHandler(event:DataGridEvent):void
                                      {
                                        if(event.columnIndex == 7 && event.reason == DataGridEventReason.NEW_COLUMN) {
                                          var noOfEggs:int = event.currentTarget.itemEditorInstance.text;
                                          if(noOfEggs > 2000) {
                                            Alert.show("That's a lot of eggs!  Are you sure?");
                                          }
                                        }
                                      }
                                
                                • 13. Re: itemEditEnd called multiple times
                                  swatihiyer

                                  Thanks .. This worked out for me .. i had been getting alert twice on itemEditEvent for Tree component . Solved it by using ListEventReason .

                                  if (MyTree.editedItemRenderer.data is MyData && event.reason == ListEventReason.NEW_ROW)

                                  {

                                       var newVal:String = event.currentTarget.itemEditorInstance.myName.text;

                                       if(newVal == "")

                                       {

                                            Alert.show(" Name cannot be blank") ;

                                        }

                                  }