Dropped Event postback across multiple RadListBoxes

[Alex]

I have multiple RadListBoxes and would like to be able to Drag an item from one to another and trigger a postback/server side event.  However, the help makes this note:  the server-side Dropped event fires only if the dragged Items are dropped onto an HTML element, which is not an Item and has its id attribute set.   Therefore, it appears that what I am trying to do is not possible.  Is there a workaround that will enable me to drag an item from one RadListBox to another and trigger a server side event?

[Nencho]

Hello Alex,

I can suggest you to set the AutoPostBackOnTransfer to true and enable the Drag and Drop functionality. I have prepared a sample project for you demonstrating the above suggestion. In addition, here is a video, demonstrating the behavior at my end. Please correct me if I had misunderstood your scenario.

Note : dll files are removed from the attached sample.

Greetings,
Nencho
the Telerik team

[Alex]

Thank you for the reply.  However, I do not believe this will satisfy my needs completely.  Let me more specific as to what I am doing.

  A have a single RadListBox with a single item in it that I would like to be able to drag to one of many RadListBoxes with a single item in them.  These other RadListBoxes are created dynamically and represent positions on the screen.  That is, I am using the Drag and Drop flexibility to create a web page that is being used to design a screen layout by dragging one position to another. 
  The solution of enabling the AllowTransfer causes the transfer controls to be shown on screen which will break my interface.  However, I imagine that a display:none in the rights CSS classes would resolve that. 
  Second, it appears that if there are multiple RadListBoxes, each would need to specify a TransferToID of a previous or next one in the sequence.  Is this a correct statement?  That is, there must be a complete circuit to allow the dropping of any one item from any RadListBox into any other RadListBox?

  Can you suggest a better control or solution for handling this scenario?  I had initially looked into using the RadDock, bu I am required to render my layout in a table for alignment sake (one column for label, one column for field) so using RadDocks would not allow me to align both segments appropriately.

[Bozhidar]

Hello Alex,

This functionality could be achieved, but please keep in mind that it is a custom scenario and it has its limitations.

As a starting point you can implement the transfer through DragAndDrop between an arbitrary number of ListBox controls using the approach from the following article:
http://www.telerik.com/support/kb/aspnet-ajax/listbox/transfer-to-multiple-radlistboxes-using-drag-and-drop.aspx

Using this implementation with some minor modifications you can manually trigger the Dropped server event from the client code. In this case however the event won't have any meaningful arguments, as the transfer is already done on the client. I've attached the modified sample to show this functionality.
 
Regards,
Bozhidar
the Telerik team

[Alex]

Is there send the right args to the dropped postback handler?  Initiating the sender.postback in _transfer before updating the items keeps the items where I want them.  Otherwise, I can just store the source and destination in hidden fields, but I would prefer a cleaner approach, if possible.

[Bozhidar]

Hello Alex,

With the modifications done to the attached page you will have the following event args:
1. e.SourceDragItems - these are the items that were dragged.
2. e.HtmlElementID - the id of the destination ListBox

In this implementation you will have to implement the transfer manually on the server, which if I understand correctly is what you are looking for.
 
Kind regards,
Bozhidar
the Telerik team

[Alex]

Nearly perfect!  Thank you so much for this solution!  I had to make a minor modification to handle the case where the user dragged the item to something other than a RadListBox in which case I could either do no postback or postback without a target (which was what I chose)

function lbdropped(sender, args) {
    if (args.get_destinationItem() != null) {
        var destinationListBoxID = args.get_destinationItem().get_listBox().get_id();
        if (destinationListBoxID != null)
            sender.postback({ type: Telerik.Web.UI.ListBoxCommand.Drop, htmlElementId: destinationListBoxID });
    }
    else
        sender.postback({ type: Telerik.Web.UI.ListBoxCommand.Drop });
}