1 Reply Latest reply on Dec 29, 2010 4:26 PM by Wang4181

    How to disable drop after the max items in DataGrid?

    Wang4181 Level 1

      Hi,

       

      I have two DataGrids, and I am able to make the drag-drop works between source_datagrid to target_datagrid, now I would like to disable the drop to target when the target_datagrid reaches the max items, but can't get it work, the drop still happened. Please point out where is wrong. Here is my code snippet:

       

      public function doDragEnter(event:DragEvent) : void

      {

           var dropTarget:DataGrid = DataGrid (event.target);

       

           var dragObj:Array = event.dragSource.dataForFormat ("items") as Array;

       

          

           if (this.dragInitator == this.target_datagrid.id)

           {

                //drag from target_datagrid, continue drag drop

                DragManager.showFeedback(DragManager.MOVE);

                DragManager.acceptDragDrop(dropTarget);

           }

           else

           {

                //drag from source_datagrid drop to target_datagrid, check if the max has reached, do nothing

                if (dropTarget.id == this.target_datagrid.id)

                {

                     var length:int = this.targetList.length + dragObj.length;

                    

                     //if the max is not reached, continue drag drop

                     if (length <= this.max)

                     {

                          DragManager.showFeedback(DragManager.MOVE);

                          DragManager.acceptDragDrop(dropTarget);

                     }

                     else

                     {

                          ; //do not drag drop, but later dragDrop event still happened

                     }

                }

           }

       

       

      }

       

      public function doDragDrop(event:DragEvent) : void

      {

           var dropTarget:DataGrid = DataGrid (event.target);

           doDragExit (event);

       

           //add the item to drop datagrid data provider, and remove the item from the drag datagrid data provider

           ...

      }

       

      private function dragInitatorTarget (event: MouseEvent) : void

      {

           this.dragInitator = this.target_datagrid.id;

      }

       

      private function dragInitatorSource (event: MouseEvent) : void

      {

           this.dragInitator = this.source_datagrid.id;

      }

       

      public function doDragExit(event:DragEvent) : void

      {

           var dropTarget:DataGrid = DataGrid (event.target);

           dropTarget.hideDropFeedback(event);

      }

       

      <mx:DataGrid id="target_datagrid" dataProvider="{this.targetList}"

           allowMultipleSelection="true"

           dragEnabled="true" dropEnabled="true" dragMoveEnabled="true"

           dragEnter="doDragEnter(event)" dragExit="doDragExit(event)" dragDrop="doDragDrop(event)"

           mouseDown="dragInitatorTarget(event)"

           editable="false" selectable="true" verticalGridLines="false" borderStyle="none"

           alternatingItemColors="[#F8F8F0, #FFFFFF]" disabledColor="0xAAA3B3"

           left="5" rowCount="16" rowHeight="20" height="83" width="100%" top="0" >

       

           <mx:columns>

           ...

           </mx:columns>

      </mx:DataGrid>

      <mx:DataGrid id="source_datagrid" dataProvider="{this.sourceList}"

           allowMultipleSelection="true"

           dragEnabled="true" dropEnabled="true" dragMoveEnabled="true"

           dragEnter="doDragEnter(event)" dragExit="doDragExit(event)" dragDrop="doDragDrop(event)"

           mouseDown="dragInitatorSource(event)"

           editable="false" selectable="true" verticalGridLines="false" borderStyle="none"

           alternatingItemColors="[#F8F8F0, #FFFFFF]" disabledColor="0xAAA3B3"

           left="5" rowCount="16" rowHeight="20" height="83" width="100%" top="0" >

       

           <mx:columns>

             ...

           </mx:columns>

      </mx:DataGrid>

       

        • 1. Re: How to disable drop after the max items in DataGrid?
          Wang4181 Level 1

          I had a working version.

           

          I found out why my code does not work, I need to call the event.preventDefault() in doDragEnter, such as:

           

          public function doDragEnter(event:DragEvent) : void

          {

           

               event.preventDefault();

               ...

                 if (length <= this.max)

                 {

                              DragManager.showFeedback(DragManager.MOVE);

                              DragManager.acceptDragDrop(dropTarget);

                 }

                 else

                 {

                              DragManager.showFeedback(DragManager.NONE);

           

                 }

          }