Monday 18 May 2009

Enabling Drag Scrolling in Flex Tree where Custom Drag Drop handlers have been used

First of all, Drag Scrolling is the feature which automatically scrolls a particular window/area while you are dragging certain items and have reached the edge of that window.

If you are using custom Drag drop event handlers (i.e. in every handler event.preventDefault() has been called) in Tree, the Drag Scrolling functionality stops. This is pretty obvious since the default action of the event has been prevented.

Now to have Drag Scrolling in these kinds of scenarios, you would have to call

{Tree Instance}.showDropFeedback(event);

in your "dragOver" Event handler. This will call the necessary flow to have drag scrolling on you Tree. But make sure that you add the below mentioned code in your "dragDrop" Event handler.

{Tree Instance}.hideDropFeedback(event) ;
event.target.mx_internal::resetDragScrolling();

Other wise you may experience sticky drag scrolling.

But this will also show the default "dropIndicatorSkin" of the Tree while you area dragging. In case you want to show your own custom skin please set it in the Style Sheet of your application.
For example :

Tree{
dropIndicatorSkin: Embed(source="image.png");
}

Also if you would like to show no "dropIndicatorSkin" at all, set a 1x1 transparent image for the skin. Setting the skin to
ClassReference(null);
did not work for me which is usually used for setting null skins.