DragDropCompleted in RadListBox

1 Answer 50 Views
DragAndDrop ListBox
Florian
Top achievements
Rank 1
Iron
Iron
Florian asked on 28 Jul 2023, 09:42 AM
Hi, 

I'm trying to use your DragDropManager to be able to reorder my lists as I wish. 

And I have to congratulate you because it's very easy to use when you just want to reorder a list.

Unfortunately, I would like to execute a method after each drag and drop action.

I tried to bind a command on the Drop event but the list order wasn't modified yet. 

So I found the telerik:DragDropManager.DragDropCompleted which seemed perfect but I didn't succeed to use it.

I tried to respect MVVM pattern with the telerik:EventToCommandBehavior, System.Windows.Interactivity.EventTrigger but it didn't work.

I also tried to use it in the code-behind (xaml.cs) but nothing works.


Can you help me to understand what's the problem ?

And can you also help me to find a way to resolve my problem within respect the MVVM pattern ?


Thanks in advance for your time and your answer.

1 Answer, 1 is accepted

Sort by
0
Accepted
Martin Ivanov
Telerik team
answered on 28 Jul 2023, 01:19 PM

Hello Florian,

The DragDropCompleted event handler is not invoked because the ListBoxDragDropBehavior handles the Drop event which prevents propagation to DragDropCompleted. To achieve your requirement, you can use a custom ListBoxDragDropBehavior and override its DragDropCompleted method. This will also allow you to expose extra ICommand properties that you can use to bind view model commands.

You can see this approach shown in the attached project. I hope it helps.

Regards,
Martin Ivanov
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Florian
Top achievements
Rank 1
Iron
Iron
commented on 31 Jul 2023, 12:54 PM | edited

Hello Martin,

Thank you for your response.
Unfortunately, it does not meet my requirement, or I might not have understood how to use the custom ListBoxDragDropBehavior.

I also think that my initial issue was not very clear. So, let me try to rephrase it.

I am using three RadListBoxes in three different UserControls. Each of them takes an ObservableCollection as ItemsSource.
What I want to achieve with Drag and Drop is to reorder the items within the listboxes.

I have already accomplished this step by adding the following elements to each of the RadListBoxes:

<telerik:RadListBox.DragDropBehavior>
    <telerik:ListBoxDragDropBehavior AllowReorder="True" telerik:TouchManager.DragStartTrigger="TapHoldAndMove" />
</telerik:RadListBox.DragDropBehavior>

<telerik:RadListBox.ItemContainerStyle>
    <Style>
        <Setter Property="telerik:DragDropManager.AllowCapturedDrag" Value="True" />
        <Setter Property="telerik:DragDropManager.AllowDrag" Value="True" />
    </Style>
</telerik:RadListBox.ItemContainerStyle>

Despite this, I still have the following problems:

- When I select an item from the list that I want to reorder, this item is bound to my view model as SelectedItem and affects the display of another UserControl whose DataContext it is. As a result, the display changes, which is not what I intended.

- The other problem is the one I mentioned in my first question. After the drop, I want to perform various actions on the modified list.

I tried to use the following method to respect the MVVM pattern:

<telerik:EventToCommandBehavior.EventBindings>
    <telerik:EventBinding EventName="telerik:DragDropManager.Drop" Command="{Binding m_oCmdDrop}" />
    <telerik:EventBinding EventName="telerik:DragDropManager.DragDropCompleted" Command="{Binding m_oCmdDragDropCompleted}" />
    <telerik:EventBinding EventName="MouseMove" Command="{Binding m_oCmdDragInitialize}" PassEventArgsToCommand="True"/>
</telerik:EventToCommandBehavior.EventBindings>

But apparently, the events "telerik:DragDropManager.Drop" and "telerik:DragDropManager.DragDropCompleted" cannot be found. I tried using them directly in the code-behind, but in that case, Visual Studio does not compile.

Can you please guide me on the steps to use these events? Is there something specific in the DragDropManager to differentiate between selecting an item and performing a drag and drop action?

Hoping that my request is clearer and more precise this time, I am eagerly awaiting your response. Oh, and I'm using Telerik 2020.1.115.45.

Best regards,
Florian
Martin Ivanov
Telerik team
commented on 01 Aug 2023, 08:52 AM

Thank you for the extra description.

You cannot use the DragDropManager in XAML. To subscribe to the manager's events you can use only code (ex: C#) and the corresponding "add" events (like AddDragDropCompleteHandler() or AddDragInitializeHandler()). For example:

DragDropManager.AddDragDropCompletedHandler(ApplicationList, OnDragCompleted);

The approach shown in the previous project is very similar to the EventBinding option. The ListBoxDragDropBehavior internally uses the DragDropManager and it exposes several methods that can be used to customize the drag/drop action. You can create extra properties for drag/drop commands a custom class that derives from ListBoxDragDropBehavior and then execute these commands in the corresponding methods. 

For example, you can extend the CustomListBoxDragDropBehavior class with an extra property named DropCommand and then execute it in the Drop method override.

Can you tell me why this approach doesn't work for you?

Florian
Top achievements
Rank 1
Iron
Iron
commented on 02 Aug 2023, 02:22 PM | edited

Hello Martin,

Thanks for your help.
Everything's going well with this approach. I'm just more comfortable and used to using xaml code.

I managed to do what I wanted cleanly and in accordance with the MVVM model.

Now I'll always be comfortable using xaml or code-behind.

Regards,
Florian
Tags
DragAndDrop ListBox
Asked by
Florian
Top achievements
Rank 1
Iron
Iron
Answers by
Martin Ivanov
Telerik team
Share this question
or