Drag and drop between two dynamically populated Listboxes

[Laura]

I have two dynamically populated listboxes, and I need to be able to drag and drop multiple items back and forth.  All events must be handled server-side in C#.  Using the Dropped event in the codebehind, I was able to get close to what I wanted, but I cannot drop on the actual listbox, only the padding on its surrounding div.  I am aware of the documentation regarding dropping only on HTML elements, not on the actual RadListBox.  So how can I achieve the desired functionality?

 

I use version 2015.1.401.45.

[Laura]

I finally figured it out, in case anyone else is having this issue.

 

The correct event is actually Transferred.  Both listboxes have to handle it, and both require TransferToID to be set to the other.  Additionally, if you don't want to the buttons to show, use <ButtonSettings ShowTransfer="False" ShowTransferAll="False"/>.  It's in the documentation, but it took me forever to find anyway.

[Ivan Danchev]

Hello Laura,

We tested the items transfer in version 2015.1.401 and in the latest version of our controls and in both the behavior was consistent, the Transferred server-side event fires even if the second ListBox is not subscribed to the event and does not have its TransferToID property set:

<telerik:RadListBox ID="RadListBox1" runat="server"
    AllowTransfer="true" Height="200px" Width="200px" AutoPostBackOnTransfer="true"
    SelectionMode="Multiple" TransferToID="RadListDestination" EnableDragAndDrop="true" OnTransferred="RadListBox1_Transferred">
    <Items>
        <telerik:RadListBoxItem Text="Source Item1" />
        <telerik:RadListBoxItem Text="Source Item2" />
        <telerik:RadListBoxItem Text="Source Item3" />
        <telerik:RadListBoxItem Text="Source Item4" />
    </Items>
</telerik:RadListBox>

<telerik:RadListBox ID="RadListDestination" runat="server" Width="200px" Height="200px"
    AllowReorder="True" SelectionMode="Multiple" AllowTransfer="true" EnableDragAndDrop="true">
    <Items>
        <telerik:RadListBoxItem Text="Destination Item1" />
        <telerik:RadListBoxItem Text="Destination Item2" />
        <telerik:RadListBoxItem Text="Destination Item3" />
        <telerik:RadListBoxItem Text="Destination Item4" />
    </Items>
</telerik:RadListBox>

The ButtonSettings properties, including the ShowTransfer, ShowTransferAll and other properties that can help you customize the appearance and position of the transfer buttons, are listed in the following documentation article.

Regards,
Ivan Danchev
Telerik