Reordering ListBox items

[Alicia]

I have a collection of objects being displayed in a LisBox that I want the user to be able to reorder using drag and drop. I thought I'd give Telerik a try to see if it could be done.

I followed the instructions here:

http://www.telerik.com/help/wpf/raddraganddrop-within-listbox.html 

There are basic errors in the XAML which I had to correct along with references to non-existent properties in Telerik classes, and it seems the documentation is out of date as the RadDragAndDropManager has been replaced with the DragDropManager. I tried adding :

RadDragAndDropManager.ExecutionMode = DragExecutionMode.Legacy;

...to see if that worked, but nothing. None of the event handlers in the code behind are called.

Could you possibly update the documentation so it works, or post me a solution that works as per the tutorial, i.e. reordering with visual feedback.

Many thanks,

Alicia

[Dimitrina]

Hello,

Thank you for your feedback. May I ask you to try adding  telerik:DragDropManager.AllowCapturedDrag="true" along with telerik:RadDragAndDropManager.AllowDrag = "true"?

Please check how this works and let me know if it helps. 

Regards,
Didie
the Telerik team

[Alicia]

Thanks for the quick reply. I've changed my draggable item style to:

<Style TargetType="Control" x:Key="DraggableItem">
    <Setter Property="telerik:RadDragAndDropManager.AllowDrag" Value="True" />
    <Setter Property="telerik:RadDragAndDropManager.AllowDrop" Value="True" />
    <Setter Property="telerik:DragDropManager.AllowCapturedDrag" Value="True"/>
</Style>

This seems to get the ball rolling.

The next problem seems to be this line in the OnDropQuery handler:

var destinationTopLeft = destination.TransformToVisual(null).Transform(new Point());

Which I think should be:

var destinationTopLeft = destination.TransformToVisual(Window.GetWindow(this)).Transform(new Point());

It then falls over with:

"Cannot animate the 'Visibility' property on a 'System.Windows.Controls.Grid' using a 'System.Windows.Media.Animation.ObjectAnimationUsingKeyFrames'. "

Thanks,

A

[Alicia]

OK, it was just being a bit more fussy, changed it to:

<Storyboard>
    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DropCueElement" Storyboard.TargetProperty="(UIElement.Visibility)">
        <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{x:Static Visibility.Visible}" />
    </ObjectAnimationUsingKeyFrames>
    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ListBoxBorder" Storyboard.TargetProperty="(Border.BorderBrush)">
        <DiscreteObjectKeyFrame KeyTime="0:0:0">
            <DiscreteObjectKeyFrame.Value>
                <SolidColorBrush Color="{x:Static Colors.Orange}"/>
            </DiscreteObjectKeyFrame.Value>
        </DiscreteObjectKeyFrame>
    </ObjectAnimationUsingKeyFrames>
</Storyboard>

This seems to be working OK now.

Would still be interested in seeing a version of the how-to using the DragDropManager. Many thanks.

[Alicia]

The only remaining issue is that the ScrollWheel isn't enabled when dragging, which limits usability when reordering larger lists.

Any solution for this?

A

[Nick]

Hi Alicia,

Unfortunately we don't have a workaround for the Wheel problem. You can use autoscrolling as an alternative with long lists. You can see a sample here. Or you can use the built in one in RadListBox. 

As to the RowReordering implementation with DragDropManager, the idea behind the implementation is the same, the only thing you need to change is the events you are using. Here is an article on how to migrate a project between the two managers. 

Hope this helps! 

Greetings,
Nik
the Telerik team