10 Replies Latest reply on May 6, 2009 5:11 AM by rjoshicool

    Drag and drop between datagrid and advanced datagrid

    rjoshicool Level 2

      Hi,

       

      I want to drag a row from my datagrid and drop it into an advanced datagrid. The columns in both the datagrids have different fields. How can this be done?

        • 1. Re: Drag and drop between datagrid and advanced datagrid
          _Natasha_

          Hi,

          The simplest way is:

          1. for datagrid set dragEnabled = true

          2. for adg set dropEnabled = true

          3. add event listener for adg event dragDrop. in this function you can manually create new object with properties for adg with values from source object. In this event you have a data you droped from dragSource, also a link to your datagrid (dragInitiator). So you can manually create all properties (if you know the mapping for properties) or iterating on colunms.

          1 person found this helpful
          • 2. Re: Drag and drop between datagrid and advanced datagrid
            rjoshicool Level 2

            Thanks for the reply. That method was pretty helpful, but unfortunately it still doesn't solve my problem.
            The reason I have figured out is that:
            My datagrid is having an ArrayCollection as the dataprovider and my Adv. Data Grid is having a Hierarchical Object as the dataprovider. The HierarchicalData object is getting its data from an Object. So it is not able to put a item dragged from an ArrayCollection into a HierarchicalData.

            • 3. Re: Drag and drop between datagrid and advanced datagrid
              _Natasha_ Level 4

              HierarhicalData Object also has source property with source collection and you can add data there.

              To help with adding additional info you can use calculateDropIndex(event) to get the position.

              If the source collection of your HierarhicalData doesn't support their owrn methods like addChildAt() you can add them.

               

              Hope this helpful.

               

              PS You can post peace of codes to face the problem.

              • 4. Re: Drag and drop between datagrid and advanced datagrid
                rjoshicool Level 2

                Thanks Natasha for the reply. I tried that method but still not able to get it running. I have attached the xml file that i have been using. Below is the mxml code:

                 

                <?xml version="1.0" encoding="utf-8"?>
                <!-- dragdrop\DandDListToDG.mxml -->
                <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initApp();">
                <mx:HTTPService id="myService" url="assets/skillsList.xml" result="resultHandler(event)" />

                 

                  <mx:Script>
                      <![CDATA[
                          import mx.controls.Alert;
                          import mx.collections.HierarchicalData;
                          import mx.rpc.events.ResultEvent;
                          import mx.events.DragEvent;
                          import mx.managers.DragManager;
                          import mx.core.DragSource;
                          import mx.collections.IList;
                          import mx.collections.ArrayCollection;
                         
                          private var myArrColl:ArrayCollection = new ArrayCollection();
                         
                          private var myHD:HierarchicalData = new HierarchicalData();

                 

                          private function initApp():void {
                     
                          //adg.dataProvider = new ArrayCollection([]);
                             
                        myService.send();
                          }
                         
                         
                          [Bindable]
                private var fs2:Object = 
                    {skill:"Parent Skill", children: [
                            {skill: "Firt Child", relation:"Parnt-Child", description:"Some description comes here", children: [
                                {skill: "mx", relation:"sub-Child", description:"asdasdasdasd"},
                                {skill: "mx", relation:"sub-child", description:"asdasdasdasdasd"}]},
                            {skill:"Second Child", relation:"1724 bytes", description:"Hello World", children: [
                                {skill:"mx", relation:"17045  bytes", description:"November 2, 2006"},
                                {skill:"mxmx", relation:"7263 bytes", description:"June 1, 2006"}]},
                            {skill: "Third Child", children: [
                                {skill: "mx", relation:"169825  bytes", description:"December 6, 2006"},
                                {skill: "mxmxmx", children: [
                                    {skill: "mx", relation:"18587  bytes", description:"November 20, 2006"},
                                    {skill: "mxmxmx", relation:"36419  bytes", description:"December 6, 2006"}]}]}
                           
                        ]};
                         
                         
                          private function resultHandler(e:ResultEvent):void
                          {
                              skillsListDatagrid.dataProvider = e.result.skillsList.skill;
                             
                              myArrColl.addItem(fs2);
                             
                              myHD.source = fs2;
                              adg.dataProvider = myHD;
                             
                          }

                 

                        
                          private function advanceDragDropHandler(event:DragEvent):void
                          {
                              if (event.dragSource.hasFormat("items"))
                            {

                 

                              event.preventDefault();

                 

                              event.currentTarget.hideDropFeedback(event);

                 

                              var dropTarget:AdvancedDataGrid = AdvancedDataGrid(event.currentTarget);

                 

                              var itemsArray:Array = event.dragSource.dataForFormat('items') as Array;
                              var tempItem:Object = { skillVerb: itemsArray[0].skillVerb, relation: "new relation", description: "description"};

                 


                              var dropLoc:int = dropTarget.calculateDropIndex(event);
                           
                            Alert.show(dropTarget.dataProvider.toString());  

                 

                            }
                          }
                         
                         private function doDrag(event:DragEvent):void
                         {
                            
                         }
                        
                      ]]>
                  </mx:Script>
                <mx:HBox>
                   
                      <mx:DataGrid x="10" y="70" width="341" height="480" rowHeight="26" editable="true" id="skillsListDatagrid" dragEnabled="true" dragMoveEnabled="true">
                            <mx:columns>
                                <mx:DataGridColumn headerText="Skills Verb" dataField="skillVerb" editable="true" />
                                <mx:DataGridColumn headerText="Skills Object" dataField="skillObject" editable="true" />
                                <mx:DataGridColumn headerText="Show Details" editable="false" width="90">
                                    <mx:itemRenderer>
                                        <mx:Component>
                                            <mx:VBox paddingLeft="30">
                                                <mx:Image source="assets/images/right_arrow.png" />
                                            </mx:VBox>
                                        </mx:Component>
                                    </mx:itemRenderer>
                                </mx:DataGridColumn>
                                </mx:columns>
                        </mx:DataGrid>
                       
                        <mx:AdvancedDataGrid id="adg" width="400" height="350" dropEnabled="true" dragEnabled="true"
                            dragMoveEnabled="true" dragDrop="advanceDragDropHandler(event)">
                        <mx:columns>
                            <mx:AdvancedDataGridColumn dataField="skill"
                                headerText="Skill"/>
                            <mx:AdvancedDataGridColumn dataField="relation"
                                headerText="Relation"/>
                            <mx:AdvancedDataGridColumn dataField="description"
                                headerText="Description"/>
                        </mx:columns>
                    </mx:AdvancedDataGrid>

                 

                </mx:HBox>

                 


                </mx:Application>

                • 5. Re: Drag and drop between datagrid and advanced datagrid
                  _Natasha_ Level 4

                  Hi,

                  All in this code is correct except one thing:

                  you cann't use default mehods for droping in ADG (I think that he knows that data in different formats). So you should delete attrubutes dropEnabled="true" dragEnabled="true" dragMoveEnabled="true" for adg and add listener for dragEnter event (for example, dragEnter="DragManager.acceptDragDrop(adg);")

                  • 6. Re: Drag and drop between datagrid and advanced datagrid
                    rjoshicool Level 2

                    Thanks again for the reply. That thing worked!

                    But the problem doesn't ends here. When I add the item to the ADG, sometimes it gets added and sometimes it shows outofbounds error. Also I need all these attributes in the ADG -  dropEnabled="true" dragEnabled="true" dragMoveEnabled="true", reason being that I need to provide the functionality of drag and drop within the Hierarchy also. Attached is the latest mxml code.

                    • 7. Re: Drag and drop between datagrid and advanced datagrid
                      _Natasha_ Level 4

                      Hi,

                      cann't see your attachement - it's still QUEUED.

                      OutOfBounds Error - is a error in your code, so you need to check the logic of adding item.

                       

                      You can use attributes dragEnabled="true" and dragMoveEnabled="true" in ADG, but you cann't use dropEnabled="true" - you should implement this function manually - you can distinguish dropEvents from your dg and ADG and create different logic for them if it's needed.

                      • 8. Re: Drag and drop between datagrid and advanced datagrid
                        rjoshicool Level 2

                        I have attached the code again..

                        • 9. Re: Drag and drop between datagrid and advanced datagrid
                          _Natasha_ Level 4

                          Hi,

                          I've readed your code.

                          You have an ideologic mistakes in

                          var dropLoc:int = dropTarget.calculateDropIndex(event); // HERE YOU GET AN ITEM NUMBER IN LIST - YOU CAN'T USE IT AS A NUMBER IN addItem FUNCTION

                           

                          You can get dropLoc and after that you can get an item at this location - oldItem at this position. You can get the parentItem for oldItem and add your tempItem as a child to parentItem. If you want to save the position you should calculate the number from the dropLoc and parentItem position.

                          1 person found this helpful
                          • 10. Re: Drag and drop between datagrid and advanced datagrid
                            rjoshicool Level 2

                            Thanks Natasha, I figured out where I was going wrong. I have unserstood the logic now but there is still one problem I am facing. I calculate the drop location for the coming item, but when i try to get the item at that position, I get index out of bounds error. For instance, I took 3 as one of the location and tried to get the element at that position in the datagrid. But it is returning me Display Objects, whereas to get the parent of a particluar Item, I need to have the item returned as an Object. Strangely, I was unable to find any method to get item at a particular location in an advanced DG. Even Num Children returns 3 and all three are Display elements..