Drag and drop between two dynamically populated Listboxes

3 posts, 0 answers
  1. Laura
    Laura avatar
    2 posts
    Member since:
    Jan 2016

    Posted 12 Jan 2016 Link to this post

    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.

  2. Laura
    Laura avatar
    2 posts
    Member since:
    Jan 2016

    Posted 12 Jan 2016 in reply to Laura Link to this post

    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.

  3. Ivan Danchev
    Ivan Danchev avatar
    1628 posts

    Posted 15 Jan 2016 Link to this post

    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">
            <telerik:RadListBoxItem Text="Source Item1" />
            <telerik:RadListBoxItem Text="Source Item2" />
            <telerik:RadListBoxItem Text="Source Item3" />
            <telerik:RadListBoxItem Text="Source Item4" />
    <telerik:RadListBox ID="RadListDestination" runat="server" Width="200px" Height="200px"
        AllowReorder="True" SelectionMode="Multiple" AllowTransfer="true" EnableDragAndDrop="true">
            <telerik:RadListBoxItem Text="Destination Item1" />
            <telerik:RadListBoxItem Text="Destination Item2" />
            <telerik:RadListBoxItem Text="Destination Item3" />
            <telerik:RadListBoxItem Text="Destination Item4" />

    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.

    Ivan Danchev
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top