Flex AdvancedDataGrid Tree Custom Drag - apache-flex

Question

I'd like to implement a custom drag on an AdvancedDataGrid tree structure, which only allows the drag on the branches (not leaves).
I'm having much difficultly with this, trying to use the MouseDown event, but not having luck!
Okay, I think I've got the mousedown able to figure out if the item is a branch of leaf. Any help on how to perform the custom drag with an advanceddatagrid??
var grid : AdvancedDataGrid = AdvancedDataGrid(event.currentTarget);
if(grid.selectedItem.hasOwnProperty("categories")
&& grid.selectedItem.categories!=null) {
Alert.show("yes");
}
else { Alert.show("no"); }

Answer 1

I've tried many different ways to do this, and this is the best solution that I have come up with. AdvancedDataGrid already has logic built in to handle the mouseMove/mouseOver/mouseDown events, so there's no need to recreate it. Simply override the DragEvent handlers.
I have duplicated the code I use in several applications that need similar functionality, included your logic for determining if the item can be dragged, as well as some logic to determine if it can be dropped in a certain location. I have also included extensive commenting to help explain why certain things are done. I hope this helps!
CustomADG.as:
package
{
import mx.controls.AdvancedDataGrid;
import mx.controls.listClasses.IListItemRenderer;
import mx.core.DragSource;
import mx.events.DragEvent;
import mx.managers.DragManager;
import mx.utils.ObjectUtil;
public class DragDropADG extends AdvancedDataGrid
{
private var itemRendererUnderPoint:IListItemRenderer
public function DragDropADG()
{
super();
}
override protected function dragStartHandler(event:DragEvent):void
{
/* Create a new Array from the Array of selectedItems, filtering out items
that are not "branches". */
var selectedBranches:Array /* of Object */ =
selectedItems.filter(hasCategories);
function hasCategories(element:*, index:int, array:Array):Boolean
{
/* Returns true if the item is a Branch (has children in the categories
property). */
return (element.hasOwnProperty("categories") &&
element.categories != null);
}
/* Exit if no Branches are selected. This will stop the drag operation from
starting. */
if (selectedBranches.length == 0)
return;
/* Reset the selectedItems Array to include only selected Branches. This
will deselect any "non-Branch" items. */
selectedItems = selectedBranches;
/* Create a copy of the Array of selected indices to be sorted for
display in the drag proxy. */
var sortedSelectedIndices:Array /* of int */ =
ObjectUtil.copy(selectedIndices) as Array /* of int */;
// Sort the selected indices
sortedSelectedIndices.sort(Array.NUMERIC);
/* Create an new Array to store the selected Branch items sorted in the
order that they are displayed in the AdvancedDataGrid. */
var draggedBranches:Array = [];
var itemRendererAtIndex:IListItemRenderer;
for each (var index:int in sortedSelectedIndices)
{
itemRendererAtIndex = indexToItemRenderer(index);
var branchItem:Object = itemRendererAtIndex.data;
draggedBranches.push(branchItem);
}
// Create a new DragSource Object to store data about the Drag operation.
var dragSource:DragSource = new DragSource();
// Add the Array of Branches to be dragged to the DragSource Object.
dragSource.addData(draggedBranches, "draggedBranches");
// Create a new Container to serve as the Drag Proxy.
var dragProxy:DragProxyContainer = new DragProxyContainer();
/* Update the labels in the Drag Proxy using the "label" field of the items
being dragged. */
dragProxy.setLabelText(draggedBranches);
/* Create a point relative to this component from the mouse
cursor location (for the DragEvent). */
var eventPoint:Point = new Point(event.localX, event.localY);
// Initiate the Drag Event
DragManager.doDrag(this, dragSource, event, dragProxy,
-eventPoint.x, -eventPoint.y, 0.8);
}
/* This function runs when ANY item is dragged over any part of this
AdvancedDataGrid (even if the item is from another component). */
override protected function dragEnterHandler(event:DragEvent):void
{
/* If the item(s) being dragged does/do not contain dragged Branches,
it/they are being dragged from another component; exit the function to
prevent a drop from occurring. */
if (!event.dragSource.hasFormat("draggedBranches"))
return;
var dropIndex:int = calculateDropIndex(event);
/* Get the itemRenderer of the current drag target, to determine if the
drag target can accept a drop. */
var dropTargetItemRenderer:IListItemRenderer =
indexToItemRenderer(dropIndex);
/* If the item is being dragged where there is no itemRenderer, exit the
function, to prevent a drop from occurring. */
if (dropTargetItemRenderer == null)
return;
/* If the item is being dragged onto an itemRenderer with no data, exit the
function, to prevent a drop from occurring. */
if (dropTargetItemRenderer.data == null)
return;
/* Store the underlying item for the itemRenderer being dragged over, to
validate that it can be dropped there. */
var dragEnterItem:Object = dropTargetItemRenderer.data
if (!dragEnterItem.hasOwnProperty("categories")
return;
if (dragEnterItem.categories == null)
return;
var eventDragSource:DragSource = event.dragSource;
eventDragSource.addData(dragEnterItem, "dropTargetItem");
/* Add an dragDrop Event Listener to the itemRenderer so that the
necessary will run when it is dropped.*/
dropTargetItemRenderer.addEventListener(DragEvent.DRAG_DROP,
itemRenderer_dragDropHandler);
// Specify that the itemRenderer being dragged over can accept a drop.
DragManager.acceptDragDrop(dropTargetItemRenderer);
}
/* Perform any logic that you want to occur once the user drops the item. */
private function itemRenderer_dragDropHandler(event:DragEvent):void
{
var eventDragSource:DragSource = event.dragSource;
var dropTargetItem:Object =
eventDragSource.dataForFormat("dropTargetItem");
if (dropTargetItem == null)
return;
var draggedBranchesData:Object =
eventDragSource.dataForFormat("draggedBranches");
var draggedBranches:Array /* of Object */ =
draggedBranchesData as Array /* of Object */;
// Call any other functions to update your underlying data, etc.
}
}
}
DragProxyContainer.as:
package
{
import mx.containers.VBox;
import mx.core.UITextField;
[Bindable]
public class DragProxyContainer extends VBox
{
private var textField:UITextField = new UITextField();
public function DragProxyContainer()
{
super();
minWidth = 150;
addChild(textField);
}
public function setLabelText(items:Array, labelField:String = "label"):void
{
var labelText:String;
var numItems:int = items.length;
if (numItems > 1)
{
labelText = numItems.toString() + " items";
}
else
{
var firstItem:Object = items[0];
labelText = firstItem[labelField];
}
textField.text = labelText;
}
}
}

Answer 2

You can try handling the dragEnter() event to stop dragging if the object is a leaf.