7 Replies Latest reply on Aug 24, 2009 12:29 PM by babo_ya

    Problem with drag and drop from DataGrid to List

    Gregory Lafrance Level 6

      When I drag an item from the DataGrid in this code to the List, it is added once in the List dataProvider, but it displays twice in the List.

       

      Any ideas on why this is happening, and how to overcome this?

       

      <?xml version="1.0"?>
      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
        <mx:Script>
          <![CDATA[       
            import mx.events.DragEvent;
            import mx.collections.ArrayCollection;

            [Bindable] private var books:ArrayCollection =  new ArrayCollection([
                {Author:'Samuel Phillips', BookTitle:'Winter in Tahoe', Price:28.00},
                {Author:'Robert McGaven', BookTitle:'Southwest Sunrise', Price:18.00},
                {Author:'Linda Thomas', BookTitle:'Lilies on the Pond', Price:19.50},
                {Author:'Richard Avondale', BookTitle:'Misty Morning', Price:32.00}
              ]);

            [Bindable] private var cartbooks:ArrayCollection =  new ArrayCollection();

            public function dragDropHandler(event:DragEvent):void {   
              var dragObj:Array= event.dragSource.dataForFormat("items") as Array;

              for (var i:uint = 0; i < dragObj.length; i++) {
                if(!cartbooks.contains(dragObj[i])){
                  cartbooks.addItem(dragObj[i]);
                }
              }
              for each(var item:Object in cartbooks){
                trace(item.Author);
                trace(item.BookTitle);
                trace(item.Price);
              }
            }          
          ]]>
        </mx:Script>
        <mx:HBox>
          <mx:VBox>
            <mx:Label text="Features books:"/>
            <mx:DataGrid id="booksgrid" dataProvider="{books}" allowMultipleSelection="true"
              dragEnabled="true" dragMoveEnabled="false">               
              <mx:columns>
                <mx:DataGridColumn dataField="Author"/>
                <mx:DataGridColumn dataField="BookTitle"/>
                <mx:DataGridColumn dataField="Price"/>
              </mx:columns>   
            </mx:DataGrid>
          </mx:VBox>
          <mx:VBox>
            <mx:Label text="Your cart:"/>
            <mx:List id="cartlist" dropEnabled="true" width="300" height="200"
              dragDrop="dragDropHandler(event);" dataProvider="{cartbooks}">
              <mx:itemRenderer>
                <mx:Component>
                  <mx:HBox>
                    <mx:Label id="author" text="{data.Author}"/>
                    <mx:Label id="title" text="{data.BookTitle}"/>
                    <mx:Label id="price" text="{data.Price}"/>
                  </mx:HBox>   
                </mx:Component>
              </mx:itemRenderer>
            </mx:List>
          </mx:VBox>
        </mx:HBox>
      </mx:Application>

        • 1. Re: Problem with drag and drop from DataGrid to List
          Gregory Lafrance Level 6

          I used preventDefault() to avoid the items displaying twice in the List with the following code, but now the thick black line remains in the List after the drop. Any ideas on how to fix this?

           

          <?xml version="1.0"?>
          <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
            <mx:Script>
              <![CDATA[       
                import mx.events.DragEvent;
                import mx.collections.ArrayCollection;

                [Bindable] private var books:ArrayCollection =  new ArrayCollection([
                    {Author:'Samuel Phillips', BookTitle:'Winter in Tahoe', Price:28.00},
                    {Author:'Robert McGaven', BookTitle:'Southwest Sunrise', Price:18.00},
                    {Author:'Linda Thomas', BookTitle:'Lilies on the Pond', Price:19.50},
                    {Author:'Richard Avondale', BookTitle:'Misty Morning', Price:32.00}
                  ]);

                [Bindable] private var cartbooks:ArrayCollection =  new ArrayCollection();

                public function dragDropHandler(evt:DragEvent):void { 
                  evt.preventDefault(); 
                  var dragObj:Array= evt.dragSource.dataForFormat("items") as Array;

                  for (var i:uint = 0; i < dragObj.length; i++) {
                    if(!cartbooks.contains(dragObj[i])){
                      cartbooks.addItem(dragObj[i]);
                    }
                  }
                  for each(var item:Object in cartbooks){
                    trace(item.Author);
                    trace(item.BookTitle);
                    trace(item.Price);
                  }
                }          
              ]]>
            </mx:Script>
            <mx:HBox>
              <mx:VBox>
                <mx:Label text="Features books:"/>
                <mx:DataGrid id="booksgrid" dataProvider="{books}" allowMultipleSelection="true"
                  dragEnabled="true" dragMoveEnabled="false">               
                  <mx:columns>
                    <mx:DataGridColumn dataField="Author"/>
                    <mx:DataGridColumn dataField="BookTitle"/>
                    <mx:DataGridColumn dataField="Price"/>
                  </mx:columns>   
                </mx:DataGrid>
              </mx:VBox>
              <mx:VBox>
                <mx:Label text="Your cart:"/>
                <mx:List id="cartlist" dropEnabled="true" width="300" height="200"
                  dragDrop="dragDropHandler(event);" dataProvider="{cartbooks}">
                  <mx:itemRenderer>
                    <mx:Component>
                      <mx:HBox>
                        <mx:Label id="author" text="{data.Author}"/>
                        <mx:Label id="title" text="{data.BookTitle}"/>
                        <mx:Label id="price" text="{data.Price}"/>
                      </mx:HBox>   
                    </mx:Component>
                  </mx:itemRenderer>
                </mx:List>
              </mx:VBox>
            </mx:HBox>
          </mx:Application>

          • 2. Re: Problem with drag and drop from DataGrid to List
            babo_ya Level 3

            You can add this style:

             

            List

            {

                 dropIndicatorSkinClassReference("src.CustomBlankLine");

             

             

             

            }

             

            and create a custom border.. as below..

             

            package src

            {

            import flash.display.*;

            import flash.geom.Matrix;

             

            import mx.core.EdgeMetrics;

            import mx.skins.halo.HaloBorder;

             

            public class CustomBlankLine extends HaloBorder

            {

            public function CustomBlankLine()

            {

             

            }

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

            {

            super.updateDisplayList(w, h);

             

            var g:Graphics = this.graphics;

            g.clear();

             

            }

            }

            }

             

             

            hope this helps,

             

            BaBo,

            1 person found this helpful
            • 3. Re: Problem with drag and drop from DataGrid to List
              Gregory Lafrance Level 6

              It doesn't seem to be working. Also, I would  hope it would easier to correct this behavior, but the class is small, no maybe if I can get that working its a good solution.

               

              package
              {
                import flash.display.*;
                import flash.geom.Matrix;
                import mx.core.EdgeMetrics;
                import mx.skins.halo.HaloBorder;

                public class CustomBlankLine extends HaloBorder{
                  public function CustomBlankLine(){
                  }

                  override protected function updateDisplayList(w:Number, h:Number):void{
                    super.updateDisplayList(w, h);
                    var g:Graphics = this.graphics;
                    g.clear();
                  }
                }
              }

               

              <?xml version="1.0"?>
              <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
                <mx:Script>
                  <![CDATA[        
                    import mx.events.DragEvent; 
                    import mx.collections.ArrayCollection;
                    [Bindable] private var books:ArrayCollection =  new ArrayCollection([
                        {Author:'Samuel Phillips', BookTitle:'Winter in Tahoe', Price:28.00},
                        {Author:'Robert McGaven', BookTitle:'Southwest Sunrise', Price:18.00},
                        {Author:'Linda Thomas', BookTitle:'Lilies on the Pond', Price:19.50},
                        {Author:'Richard Avondale', BookTitle:'Misty Morning', Price:32.00}
                      ]);
                    [Bindable] private var cartbooks:ArrayCollection =  new ArrayCollection();
                    public function dragDropHandler(evt:DragEvent):void {  
                      List(evt.currentTarget).setStyle("dropIndicatorSkin", ClassReference(BlankLine));
                      evt.preventDefault();  
                      var dragObj:Array= evt.dragSource.dataForFormat("items") as Array; 
                      for (var i:uint = 0; i < dragObj.length; i++) { 
                        if(!cartbooks.contains(dragObj[i])){
                          cartbooks.addItem(dragObj[i]);
                        }
                      }
                      for each(var item:Object in cartbooks){
                        trace(item.Author);
                        trace(item.BookTitle);
                        trace(item.Price);
                      }
                    }           
                  ]]>
                </mx:Script>
                <mx:NumberFormatter id="nf" precision="2"/>
                <mx:HBox>
                  <mx:VBox>
                    <mx:Label text="Features books:"/>
                    <mx:DataGrid id="booksgrid" dataProvider="{books}" allowMultipleSelection="true" 
                      dragEnabled="true" dragMoveEnabled="false">                
                      <mx:columns>
                        <mx:DataGridColumn dataField="Author" width="100"/>
                        <mx:DataGridColumn dataField="BookTitle" width="100"/>
                        <mx:DataGridColumn dataField="Price" width="50">
                          <mx:itemRenderer>
                            <mx:Component>
                              <mx:Label text="{outerDocument.nf.format(data.Price)}"/>
                            </mx:Component>
                          </mx:itemRenderer>
                        </mx:DataGridColumn>
                      </mx:columns>    
                    </mx:DataGrid>
                  </mx:VBox>
                  <mx:VBox>
                    <mx:Label text="Your cart:"/>
                    <mx:List id="cartlist" dropEnabled="true" width="300" height="200" 
                      dragDrop="dragDropHandler(event);" dataProvider="{cartbooks}">
                      <mx:itemRenderer>
                        <mx:Component>
                          <mx:HBox>
                            <mx:Label id="author" text="{data.Author}"/>
                            <mx:Label id="title" text="{data.BookTitle}"/>
                            <mx:Label id="price" text="{outerDocument.nf.format(data.Price)}"/>
                          </mx:HBox>    
                        </mx:Component>
                      </mx:itemRenderer>
                    </mx:List>
                  </mx:VBox>
                </mx:HBox>
              </mx:Application>
              
              
              • 4. Re: Problem with drag and drop from DataGrid to List
                Gregory Lafrance Level 6

                Actually, I solved this easily using the hideDropFeedback(event) method:

                 

                <?xml version="1.0"?>
                <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
                  <mx:Script>
                    <![CDATA[       
                      import mx.events.DragEvent;
                      import mx.collections.ArrayCollection;

                      [Bindable] private var books:ArrayCollection =  new ArrayCollection([
                          {Author:'Samuel Phillips', BookTitle:'Winter in Tahoe', Price:28.00},
                          {Author:'Robert McGaven', BookTitle:'Southwest Sunrise', Price:18.00},
                          {Author:'Linda Thomas', BookTitle:'Lilies on the Pond', Price:19.50},
                          {Author:'Richard Avondale', BookTitle:'Misty Morning', Price:32.00}
                        ]);

                      [Bindable] private var cartbooks:ArrayCollection =  new ArrayCollection();

                      public function dragDropHandler(evt:DragEvent):void { 
                        List(evt.currentTarget).hideDropFeedback(evt);
                        evt.preventDefault(); 
                        var dragObj:Array= evt.dragSource.dataForFormat("items") as Array;

                        for (var i:uint = 0; i < dragObj.length; i++) {
                          if(!cartbooks.contains(dragObj[i])){
                            cartbooks.addItem(dragObj[i]);
                          }
                        }
                        for each(var item:Object in cartbooks){
                          trace(item.Author);
                          trace(item.BookTitle);
                          trace(item.Price);
                        }
                      }          
                    ]]>
                  </mx:Script>
                  <mx:NumberFormatter id="nf" precision="2"/>
                  <mx:HBox>
                    <mx:VBox>
                      <mx:Label text="Features books:"/>
                      <mx:DataGrid id="booksgrid" dataProvider="{books}" allowMultipleSelection="true"
                        dragEnabled="true" dragMoveEnabled="false">               
                        <mx:columns>
                          <mx:DataGridColumn dataField="Author" width="100"/>
                          <mx:DataGridColumn dataField="BookTitle" width="100"/>
                          <mx:DataGridColumn dataField="Price" width="50">
                            <mx:itemRenderer>
                              <mx:Component>
                                <mx:Label text="{outerDocument.nf.format(data.Price)}"/>
                              </mx:Component>
                            </mx:itemRenderer>
                          </mx:DataGridColumn>
                        </mx:columns>   
                      </mx:DataGrid>
                    </mx:VBox>
                    <mx:VBox>
                      <mx:Label text="Your cart:"/>
                      <mx:List id="cartlist" dropEnabled="true" width="300" height="200"
                        dragDrop="dragDropHandler(event);" dataProvider="{cartbooks}">
                        <mx:itemRenderer>
                          <mx:Component>
                            <mx:HBox>
                              <mx:Label id="author" text="{data.Author}"/>
                              <mx:Label id="title" text="{data.BookTitle}"/>
                              <mx:Label id="price" text="{outerDocument.nf.format(data.Price)}"/>
                            </mx:HBox>   
                          </mx:Component>
                        </mx:itemRenderer>
                      </mx:List>
                    </mx:VBox>
                  </mx:HBox>
                </mx:Application>

                • 5. Re: Problem with drag and drop from DataGrid to List
                  babo_ya Level 3

                  Actually This doesn't work for me.. I still see the blank line..

                   

                  I just copied/paste and ran it.... You should you don't have the style added?

                   

                  Based on your code.. I don't see how this will work because.. dragDrop happens when item is dropped.. and I tried dragEnter and that didn't work either...

                   

                  This is weird..

                   

                   

                  BaBo,

                  • 6. Re: Problem with drag and drop from DataGrid to List
                    Gregory Lafrance Level 6

                    I compiled and ran the last code I posted on a different machine and it worked for me. Don't know why you are not seeing the same results.

                    • 7. Re: Problem with drag and drop from DataGrid to List
                      babo_ya Level 3

                      Misread.. I thought you meant while dragging..... (meaning before drop happens)

                       

                      Sorry.

                       

                      BaBo,