Drag & Drop - "Drop before" and "Drop after" behavior

[Patrick]

I noticed on the web demo for the Silverlight TreeView drag and drop, as you are dragging an item over each item in the tree, the message displayed is always "Drop before", until you drag to the end of the last item at which time it says "Drop after".  This makes sense.  There is also a small (like one pixel) position between each item where you cannot drop... no big deal. 

In my version or the treeview (2009.2.812.1030), the behavior appears to be this... as you are moving down a list of items, the message displayed is "Drop before", then "Drop after which repeats for each item all the way to the last item in the list.  Also between each "Drop before" and "Drop after" there is a fairly large "dead zone" where you cannot drop the item. 

I would like my treeview to work like the demo as the demo works nicely and makes sense.

I cannot find anyway to change this behavior and it appears from the code of the demo, that nothing special had to be set to force it to behave as such. 

Any help would be appreciated.  Thanks!

[Miroslav]

Hi Patrick,

I checked some of the online TreeView demos and I got the "Drop Before" all the time. Which example are you looking at? If only "Drop before" appears for you, then this will be some kind of bug.

The dead space in the middle of the item is there because that is normally where "Drop in" will appear. Quite possibly the item you are trying to drag over does not have an items source that is an IList and then the TreeView decides that drop is not possible in the item.

You can get the same behavior by handling the drop query event for the TreeViewItems and setting the DropPosition to "before". You can attach this handler to the application root or the TreeView, it will still work (only its scope will be different).

Here is the code for this:

//Only drop before:
treeView.AddHandler(RadDragAndDropManager.DropQueryEvent,
new EventHandler<DragDropQueryEventArgs>(OnTreeViewOnlyDropBefore), true);

And the handler itself:

private static void OnTreeViewOnlyDropBefore(object sender, DragDropQueryEventArgs e)
{
   var destination = e.Options.Destination as RadTreeViewItem;
   if (destination != null)
   {
      if (destination.DropPosition == DropPosition.Inside)
      {
         e.QueryResult = true;
      }
      destination.DropPosition = DropPosition.Before;
   }
}

This way you are almost always allowing a drop, but this may not be reasonable. You also need to check that an item is not being dropped inside itself.

I hope this will work for you, but at any rate - could you point me to the example where you see the unexpected for us behavior. :)

Best wishes,
Miroslav
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Dan Russotto]

The demo came from here: http://demos.telerik.com/silverlight/#DragAndDrop/TreeToGrid

You are correct (as I said in my post) that the demo does get the "Drop before" all the time... except for when on the last item in the list at which time it will allow you to "Drop after" the last item.

I've already handled the event myself and placed the "Drop before" / "Drop after" text.  That's not a problem. 

Biggest problem for me is the "dead" space I talked about.  I'm basically using the treeView as ListBox due to the fact that I can't find the same drag and drop functionality in any other controls (RadGridView or ListBox).  My TreeView is then bound to a collection where each item will NOT have children (only 1 level deep), so an item in my list will never have an IList associated with it. 

In the demo (link above), single items that "apparently" do not have an IList associated with them do not have the large area of dead space.  They only have like a pixel of dead space and it appears to be towards the bottom of the item.

Thanks for your help!

[Miroslav]

Hi Dan,

Thanks for the clarifications. If you are going for a non-hierarchical TreeView, you can use this handler to eliminate the dead space. What it does is: If you are going to drop something inside an item, choose whether it is going to be before or after:

private static void OnTreeViewOnlyDropBefore(object sender, DragDropQueryEventArgs e)
{
   var destination = e.Options.Destination as RadTreeViewItem;
   if (destination != null)
   {
      if (destination.DropPosition == DropPosition.Inside)
      {
          var yOffset = destination.TransformToVisual(null).Transform(new Point()).Y; 
          var currentDragOffset = e.Options.CurrentDragPoint.Y; 

          if (currentDragOffset - yOffset < destination.ActualHeight / 2) 
          { 
              destination.DropPosition = DropPosition.Before; 
          } 
          else 
          { 
               destination.DropPosition = DropPosition.After; 
          } 

          e.QueryResult = true; 
      }    
   }
}

This handler should be enough because the text is actually set in the DropInfo event depending on whether it is eventually successful.

Does this help you?

Kind regards,
Miroslav
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Patrick]

Which event would call this?  The "DropQuery" or "DropInfo?  I'm guessing the DropInfo event since the DropQuery is called only upon dropping the item, and I would like to remove the dead space (no drop allowed area) when simply dragging over the list.

So would it be like this?     RadDragAndDropManager.AddDropInfoHandler(myTreeView, OnTreeViewOnlyDropBefore);

 

[Miroslav]

Hi Patrick,

It is  the DropQuery event - this event is called on every mouse move to see whether a drop is possible there.

Since the TreeView handles this event, you need to use the more verbose event registration which allows you to handle handled events:

treeView.AddHandler(RadDragAndDropManager.DropQueryEvent,
new EventHandler<DragDropQueryEventArgs>(OnTreeViewOnlyDropBefore), true);

The reason why you may see the DropQuery event only at the end is because you are not seeing the handled events.

Sincerely yours,
Miroslav
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Sukhvinder Pal]

Why do I get the error "Cannot convert argument 1 from Telerik.Windows.RoutedEvent to System.Windows.RoutedEvent" at line

treeView.AddHandler(RadDragAndDropManager.DropQueryEvent, 

[Miroslav]

Hello Sukhvinder Pal,

We  have an AddHandler extension method that deals with the telerik RoutedEvents.

Please include in your usings:

using Telerik.Windows

All the best,
Miroslav
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.