10 Replies Latest reply on Aug 31, 2009 4:30 PM by Umal Kumar

    DataGrid enters in edit mode after alert is closed

    chaky\ Level 1

      Hi, i tried to fix this by myself but i just couldn't.
      This is the problem:

       

      I added  KeyboardEvent.KEY_DOWN event listener for data grid and if key code is 46 (delete btn) alert is shown to ask user if he wants to delete that selected row and that is working without problem but when alert is closed data grid enters in edit mode. Why is this happening? Also i noticed that last field that has been edited will enter in edit mode regardless of what row is selected.

       

      This is the code:

       

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="init()">
      <mx:Script>
           <![CDATA[
                import mx.controls.Alert;
                private function init():void
                {
                     testGrid.addEventListener(KeyboardEvent.KEY_DOWN, dataGridKeyDown);
                }
                
                private function dataGridKeyDown(e:KeyboardEvent):void
                {
                     if(e.keyCode == 46)
                     {
                          Alert.show("Do you really want to delete row", "Program",(Alert.OK | Alert.NO));
                     }     
                }
           ]]>
      </mx:Script>
      <mx:ArrayCollection id="arrColl">
               <mx:Object>
                  <mx:col1>Pavement</mx:col1>
                  <mx:col2>11.99</mx:col2>
                  <mx:col3>Slanted and Enchanted</mx:col3>
               </mx:Object>
               <mx:Object>
                  <mx:col1>Pavement</mx:col1>
                  <mx:col2>Brighten the Corners</mx:col2>
                  <mx:col3>11.99</mx:col3>
               </mx:Object>
            </mx:ArrayCollection>
      
           <mx:DataGrid editable="true" id="testGrid" width="450" height="300" dataProvider="{arrColl}">
                <mx:columns>
                     <mx:DataGridColumn headerText="Col 1" dataField="col1"/>
                     <mx:DataGridColumn headerText="Col 2" dataField="col2"/>
                     <mx:DataGridColumn headerText="Col 3" dataField="col3"/>
                </mx:columns>
           </mx:DataGrid>
      </mx:Application>
      

      So this is how it looks when alert is shown:

      http://www.pxds.com/alert.jpg

       

      And when i click OK or NO in alert box and when alert box  disappear grid automatically enter in edit mode and looks like this:

       

       

      http://www.pxds.com/editEntered.jpg

       

      Any help is  appreciated as this is really annoying issue.

        • 1. Re: DataGrid enters in edit mode after alert is closed
          Andrew Rosewarn

          You have the editable property of the dataGrid set to true!?

          • 2. Re: DataGrid enters in edit mode after alert is closed
            Madhav Subedi Level 4

            do you need the datagrid editable?? if not set editable="false".

            if you need it editable, try following:

             

            <?xml version="1.0" encoding="utf-8"?>
            <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                                layout="vertical"
                                creationComplete="init()">
                 <mx:Script>
                      <![CDATA[
                           import mx.events.CloseEvent;
                           import mx.controls.Alert;
            
                           private function init():void
                           {
                                testGrid.addEventListener(KeyboardEvent.KEY_DOWN, dataGridKeyDown);
                           }
            
                           private function dataGridKeyDown(e:KeyboardEvent):void
                           {
                                if (e.keyCode == 46)
                                {
                                     Alert.show("Do you really want to delete row", "Program", (Alert.YES | Alert.NO),this,deleteHandler);
                                     testGrid.editable = false;
                                }
                           }
                           
                           private function deleteHandler( e:CloseEvent ):void
                           {
                                if( e.detail == Alert.YES )
                                {
                                     // delete
                                }
                                else
                                {
                                     // do not delete
                                }
                                testGrid.editable = true;
                           }
                      ]]>
                 </mx:Script>
                 <mx:ArrayCollection id="arrColl">
                      <mx:Object>
                           <mx:col1>Pavement</mx:col1>
                           <mx:col2>11.99</mx:col2>
                           <mx:col3>Slanted and Enchanted</mx:col3>
                      </mx:Object>
                      <mx:Object>
                           <mx:col1>Pavement</mx:col1>
                           <mx:col2>Brighten the Corners</mx:col2>
                           <mx:col3>11.99</mx:col3>
                      </mx:Object>
                 </mx:ArrayCollection>
            
                 <mx:DataGrid editable="true"
                                 id="testGrid"
                                 width="450"
                                 height="300"
                                 dataProvider="{arrColl}">
                      <mx:columns>
                           <mx:DataGridColumn headerText="Col 1"
                                                  dataField="col1"/>
                           <mx:DataGridColumn headerText="Col 2"
                                                  dataField="col2"/>
                           <mx:DataGridColumn headerText="Col 3"
                                                  dataField="col3"/>
                      </mx:columns>
                 </mx:DataGrid>
            </mx:Application>
            
             
            
            • 3. Re: DataGrid enters in edit mode after alert is closed
              Andrew Rosewarn Level 3

              In your example that is.

              • 4. Re: DataGrid enters in edit mode after alert is closed
                chaky\ Level 1

                Hey this is good thinking man. It is working partially. When i use mouse to click on OK or NO button than is all good, but when i press enter to press the OK or NO buttons than grid enters the edit mode again and yes i needed it to be editable.

                • 5. Re: DataGrid enters in edit mode after alert is closed
                  Flex harUI Adobe Employee

                  Try Flex 3.4.

                   

                  Alex Harui

                  Flex SDK Developer

                  Adobe Systems Inc.

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

                  • 6. Re: DataGrid enters in edit mode after alert is closed
                    Umal Kumar Adobe Employee

                    Hi,

                     

                    Using the Flex SDK 3.4 you wil not see the problem you are facing. I tested this and it works fine for me.

                    • 7. Re: DataGrid enters in edit mode after alert is closed
                      chaky\ Level 1

                      Hi, i downloaded 3.4 sdk from here

                       

                      http://opensource.adobe.com/wiki/display/flexsdk/download?build=3.4.0.9271&pkgtype=1

                       

                      and its still behaving the same. How is it that is working for you. Is there something else i need to do.

                      • 8. Re: DataGrid enters in edit mode after alert is closed
                        Umal Kumar Adobe Employee

                        Use this code after you download the Flex SDK 3.4 and perform the same operation as you want.Please test this.

                         

                        <?xml version="1.0" encoding="utf-8"?>
                        <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                                            layout="vertical"
                                            creationComplete="init()">
                             <mx:Script>
                                  <![CDATA[
                                       import mx.events.CloseEvent;
                                       import mx.controls.Alert;

                                       private function init():void
                                       {
                                            testGrid.addEventListener(KeyboardEvent.KEY_DOWN, dataGridKeyDown);
                                       }

                                       private function dataGridKeyDown(e:KeyboardEvent):void
                                       {
                                            if (e.keyCode == 46)
                                            {
                                                 Alert.show("Do you really want to delete row", "Program", (Alert.YES | Alert.NO),this,deleteHandler);
                                                 testGrid.editable = false;
                                            }
                                       }
                                      
                                       private function deleteHandler( e:CloseEvent ):void
                                       {
                                            if( e.detail == Alert.YES )
                                            {
                                                 // delete
                                            }
                                            else
                                            {
                                                 // do not delete
                                            }
                                            testGrid.editable = true;
                                       }
                                  ]]>
                             </mx:Script>
                             <mx:ArrayCollection id="arrColl">
                                  <mx:Object>
                                       <mx:col1>Pavement</mx:col1>
                                       <mx:col2>11.99</mx:col2>
                                       <mx:col3>Slanted and Enchanted</mx:col3>
                                  </mx:Object>
                                  <mx:Object>
                                       <mx:col1>Pavement</mx:col1>
                                       <mx:col2>Brighten the Corners</mx:col2>
                                       <mx:col3>11.99</mx:col3>
                                  </mx:Object>
                             </mx:ArrayCollection>

                             <mx:DataGrid editable="true"
                                             id="testGrid"
                                             width="450"
                                             height="300"
                                             dataProvider="{arrColl}">
                                  <mx:columns>
                                       <mx:DataGridColumn headerText="Col 1"
                                                              dataField="col1"/>
                                       <mx:DataGridColumn headerText="Col 2"
                                                              dataField="col2"/>
                                       <mx:DataGridColumn headerText="Col 3"
                                                              dataField="col3"/>
                                  </mx:columns>
                             </mx:DataGrid>
                        </mx:Application>
                        1 person found this helpful
                        • 9. Re: DataGrid enters in edit mode after alert is closed
                          chaky\ Level 1

                          Yeah its working with that. Thanks alot men.

                          • 10. Re: DataGrid enters in edit mode after alert is closed
                            Umal Kumar Adobe Employee

                            Great, Please mark the solution provided by me as the solution which solved your problem.