Transfer to multiple RadListBoxes using Drag and Drop

[Martin]

I have multiple RadListBoxes and I want to enable Drag and Drop between them. I found a KB article describing how do to this. I downloaded it and it "works". That is to say you can drag items from any list box and drop them on any other. What the demonstration doesn't show is how to make these changes appear back on the server. Ultimately I want the server to remember the new configuration of ListBoxes. Is there a simple way to achieve this?

The KB article I referred to is here

Martin

[Bozhidar]

Hi Martin,

To make the changes persist on the server, you just have to make the following modification in the transferManager.performTransfer function:

transferManager.performTransfer = function(sender, args) {
    var destinationItemIndex = this._getDestinationIndex(args);
    var destinationListBox = this._getDestinationListBox(args);

    if (destinationListBox == null)
        return;

    var reorderIndex = args.get_dropPosition() == 0 ?
    destinationItemIndex : destinationItemIndex + 1;

    var items = args.get_sourceItems();

    sender.trackChanges();
    destinationListBox.trackChanges();
    this._transfer(items, destinationListBox, reorderIndex);
    sender.commitChanges();
    destinationListBox.commitChanges();
}

Greetings,
Bozhidar
the Telerik team

[Martin]

Many thanks. Once I saw the solution, I was able to find it in the documentation but none of the searches I had made returned the solution!

Thanks again.

Martin

[Rodolfo]

Hi,

I was unable to work this example with ItemTemplate, it drags but after the drop the item disapear.
I notice too that if we use normal Items with CssClass, after the drop the styles are lost.

Any workaround for both situations?

Thanks

[Bozhidar]

Hi Rodolfo,

When you use templates, you have to call the DataBind() server method when you add new nodes, so that the binding expressions can be evaluated. In the case of the example, you can make a partial postback using RadAjaxManager. Here's how you can do that:
1. Put all ListBoxes inside a Panel with ID="Panel1" (this is not required, but that way it takes less code to  refresh all ListBoxes).
2. On Page_Load call the DataBind() method for all ListBoxess. Like so:

Copy Code

protected void Page_Load(object sender, EventArgs e)
{
    RadListBox1.DataBind();
    RadListBox2.DataBind();
    ...
}

3. Modify the transferManager._transfer function, so that it looks like this:

Copy Code

transferManager._transfer = function (items, destination, reorderIndex, sender) {
    $.each(items, function (index, item) {
        destination.trackChanges();
        destination.get_items().insert(reorderIndex, item);
        destination.commitChanges();
        var ajaxManager = $find("<%= RadAjaxManager1.ClientID %>");
        ajaxManager.ajaxRequestWithTarget('<%= Panel1.UniqueID %>', '');
    });
}

Please note, that in order for the changes to be persisted after a postback, you have to also call trackChanges() and commitChanges() in the same function.

Unfortunately the second issue is a little bit more difficult to resolve. Currently client manipulation of the cssClass property of RadListBoxItem is not implemented, so you won't be able to persist any changes made to the css of an item to the server.
 
Greetings,
Bozhidar
the Telerik team

[Rodolfo]

Hi,

I'm getting an error after use your suggestion.
I have my code in a user control and using a RadAjaxManagerProxy.

New Code:

var ajaxManager = $find("<%= MyProxy.ClientID %>");

ajaxManager.ajaxRequestWithTarget('<%= MyPanel.UniqueID %>', '');

Error:
System.Web.HttpUnhandledException (0x80004005): Exception of type 'System.Web.HttpUnhandledException' was thrown. ---> System.Web.HttpException (0x80004005): Please, see whether wrapping the code block, generating the exception, within RadCodeBlock resolves the error. ---> System.Web.HttpException (0x80004005): The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>).
   at System.Web.UI.ControlCollection.AddAt(Int32 index, Control child)
   at Telerik.Web.UI.RadAjaxControl.MoveUpdatePanel(Control initiator, Control updated)
   at Telerik.Web.UI.RadAjaxControl.MoveUpdatePanel(Control initiator, Control updated)
   at Telerik.Web.UI.RadAjaxControl.PerformRender()
   at Telerik.Web.UI.RadAjaxControl.OnPageRender(HtmlTextWriter writer, Control page)
   at Telerik.Web.UI.RadAjaxControl.RenderPageInAjaxMode(HtmlTextWriter writer, Control page)
   at System.Web.UI.Control.RenderChildrenInternal(HtmlTextWriter writer, ICollection children)
   at System.Web.UI.Control.RenderChildren(HtmlTextWriter writer)
   at System.Web.UI.Control.Render(HtmlTextWriter writer)
   at System.Web.UI.Page.Render(HtmlTextWriter writer)
   at System.Web.UI.Control.RenderControlInternal(HtmlTextWriter writer, ControlAdapter adapter)
   at System.Web.UI.Control.RenderControl(HtmlTextWriter writer, ControlAdapter adapter)
   at System.Web.UI.Control.RenderControl(HtmlTextWriter writer)
   at System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint)
   at System.Web.UI.Page.HandleError(Exception e)
   at System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint%

 

 

[Bozhidar]

Hi Rodolfo,

Please refer to the following help article explaining how to use the client api of RadAjaxManagerProxy:
http://www.telerik.com/help/aspnet-ajax/ajax-ajaxmanagerproxy.html 

The two issues with your code are:

1. You have to obtain a reference to the RadAjaxManager of the page, instead of the proxy. Here's shown how to do that:

var ahaxmanager = $find("<%= RadAjaxManager.GetCurrent(Page).ClientID %>");

2. You should enclose your script inside <telerik:RadCodeBlock> tags.
 
Regards,
Bozhidar
the Telerik team

[Rodolfo]

Hi,

After your help, I manage to put it working, but had to make same shanges:

1st) Had to move that two extra lines of code from transferManager._transfer = function to transferManager.performTransfer = function, if not the item stayed in source list box (may be for copy mode is ok, but I wanted move).
2nd) In my Template I could not use Text value because it start to duplicate the content in each move. So I only used Attributes.

Thanks
RS

[Josh]

Thanks for posting the original code and the modification that supports persisting on postback. . . but the problem that I am having is that when I originally had 2 boxes that I was moving items back and forth between, I relied on the the Transferring and Transferred server side events to update the database (Transferring) and then rebind various controls on the page (Transferred).

Now I have a 3rd RadListBox, and I am able to perfectly move items from any of my three boxes to any other on the client side, but my server side events are no longer fired.  I'm not sure what to do, any help is appreciated.  Thanks!

-Josh

[Bozhidar]

Hello Josh,

If you scenario involves only 3 RadListBoxes, you can use the approach from the attached sample page.
 
Regards,
Bozhidar
the Telerik team

[Josh]

Bozhidar,
  Thanks for responding.  The problem that I have is that I want to be able to drag and drop between any of the 3 boxes (see attached .png file for visual).  The multiple RadListBoxes using Drag and Drop solution provided in the Telerik KB is exactly what I need, but for some reason the page is not posting back when I drop items on the target box.

  The solution you posted allows Box 1 -> Box 2 -> Box 3 -> Box 1, essentially pointing each box at one other in a circle, which doesn't provide two way communication between each box.

  I had thought that the guidance in this forum thread would fix that, but still not picking up any server events.  Any ideas?  Can I trigger RadListBox server events from javascript?  Thanks,

Josh

[Rodolfo]

Josh,
I abandon the RadList solution and went to RadDocks.
With them I was able to play as I wanted...

See the picture attached, which I simulate the KanBan.
With RadDock solution I was able to control which Start and End Dock I was able to drag and drop each Item.
I was able to limit how many items each one can hold.
I had a problem during postback when saving the changes to database, an exception is fired during a javascript in Telerik controls. Since the support was unable to reproduce,I fixed doing a global postback in the page and redraw again the whole page.

You may need to rewrite all of your code...

[Josh]

Rodolfo,
  I like the concept of what you posted using RadDock.  We actually use Kanban for our development in TFS, so looks familiar.  If there is no reasonable answer for two-way drag and drop between 3 boxes, I may have to move to something like your solution.  It seems like I am dangerously close to getting an answer using RadListBoxes, the client-side drag and drop is working flawlessly, there is just now postback or server event being triggered.  Thanks for posting your alternate solution.

Josh

[Bozhidar]

Hi Josh,

Did you try testing the page I sent you in my previous reply. Although it may seem that it has a circular configuration, the ListBoxes automatically set up the backward connections, so you can drag an item from any ListBox to any other ListBox.
 
All the best,
Bozhidar
the Telerik team

[Josh]

Bozhidar,
  My apologies, I stand corrected.  I just ran your sample code and it absolutely works as expected!  I am able to transfer to and from any combination of my three boxes.  One thing I noticed is that you call the same server side function in all three, I'll play around with it, but wondered if that matters?  Based on the fact that I can get the source and destination boxes from the EventArgs, I can handle different scenarios in a single method.

  Thanks again for your response!

Josh

[Fatma]

It works for  me I forgeted to write commit changes