4 Replies Latest reply on Jul 20, 2010 6:19 AM by Alexis-VAUTIER

    Code of the Drag&Drop

    Alexis-VAUTIER

      Hello. I'm french (so excuse me for my langage).

       

      I am a beginner in flex and i would like to have an information.

       

      In an application i'm doing, i want to use datagrid. I'm using a trash too. The rows of the datagrid are not directly deleted : they are send in the trash.

      I want too to restor the data in the trash. I know i can use this transfert with the drag&drop, but i would like to use a button too.

       

      For example, a button "Restor" will send the row selected in the first datagrid. And the button deleted of the datagrid will send the row in the trash.

       

      Do you have an idea about the code I need to use ?

       

      Thanks a lot.

       

      Alexis.

        • 1. Re: Code of the Drag&Drop
          Dajji Level 3

          Just keep two arraycollections. One for the original data and one for deleted. When you delete a row, move the item from original arraycollection to deleted arraycollection. When you want to restore, move back all the items from deleted arraycollection to the original arraycollection.

          1 person found this helpful
          • 2. Re: Code of the Drag&Drop
            Alexis-VAUTIER Level 1

            Yes, that is want i want to use.

            But, to move the row, i already have a drag&drop.

             

            But, for people won't don't really know about computers, i would like to put too a Erase button ( who will be the same thing to put a row from the first datagrid to the trash).

            But, i don't know how i can write the code of this function. I know how to delete a row with (trash.dataProvider.removeItemAt(trash.selectedIndex);), but i don't know how doing a move with the code...

             

            Thanks for your help Dajji

            • 3. Re: Code of the Drag&Drop
              Matt Le Fevre Level 4

              something like this?

               

              <?xml version="1.0" encoding="utf-8"?>
              <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
                  
                  <mx:XMLList id="testData" xmlns="">
                      <item name="Item 1"/>
                      <item name="Item 2"/>
                      <item name="Item 3"/>
                      <item name="Item 4"/>
                      <item name="Item 5"/>
                      <item name="Item 6"/>
                      <item name="Item 7"/>
                      <item name="Item 8"/>
                      <item name="Item 9"/>
                      <item name="Item 10"/>
                  </mx:XMLList>
                  
                  <mx:Script>
                      <![CDATA[
                          import mx.events.DragEvent;
                          
                          private function dg1DragComplete(event:DragEvent):void
                          {
                              if(event.relatedObject != null)
                                  if(event.relatedObject.name == 'dg2')
                                  {
                                      dg1.dataProvider.removeItemAt(dg1.selectedIndex);
                                  }
                          }
                          
                          public function restoreItem():void
                          {
                              dg1.dataProvider.addItem(dg2.selectedItem);
                              dg2.dataProvider.removeItemAt(dg2.selectedIndex);
                          }
                          
                      ]]>
                  </mx:Script>
                  
                  <mx:DataGrid x="31" y="145" id="dg1" dataProvider="{testData}" dragEnabled="true" dragComplete="dg1DragComplete(event)" width="389" height="307">
                      <mx:columns>
                          <mx:DataGridColumn headerText="Actual Data" dataField="@name"/>
                      </mx:columns>
                  </mx:DataGrid>
                  
                  <mx:DataGrid x="517" y="204" id="dg2" dropEnabled="true" height="228" width="186">
                      <mx:columns>
                          <mx:DataGridColumn headerText="Bin">
                              <mx:itemRenderer>
                                  <mx:Component>
                                      <mx:HBox>
                                          <mx:Label text="{data.@name}"/>
                                          <mx:Button label="Restore" click="this.parentApplication.restoreItem()"/>
                                      </mx:HBox>
                                  </mx:Component>
                              </mx:itemRenderer>
                          </mx:DataGridColumn>
                      </mx:columns>
                  </mx:DataGrid>
              </mx:Application>
              
              
              • 4. Re: Code of the Drag&Drop
                Alexis-VAUTIER Level 1

                Thanks a lot !

                 

                            dg1.dataProvider.removeItemAt(dg2.selectedIndex);

                 

                This is what i need !! Thinks again !

                 

                ( I've have an other question... ) . If I put the trash in a titleWindow and i but the titleWindow in an other file.mxml. For exemple, the name of the file is Trash and the name of the datagrid is dgTrash. How can I use it is the previous sentence ?


                dgTrash.Trash.dataProvider.remo...

                Trash.dgTrash.dataProvider.remo...

                 

                Thanks again !