Telerik Forums / UI for ASP.NET AJAX Forum / ListBox /

Transfer to multiple RadListBoxes using Drag and Drop

Telerik UI for ASP.NET AJAX
Resources Buy Try

16 posts, 1 answers

Martin

39 posts

Member since:
Dec 2011

Posted 18 Jan 2012 Link to this post

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
Answer
Bozhidar
Admin

1183 posts

Posted 19 Jan 2012 Link to this post

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

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
Martin

39 posts

Member since:
Dec 2011

Posted 19 Jan 2012 Link to this post

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

5 posts

Member since:
Sep 2010

Posted 04 Feb 2012 Link to this post

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
Admin

1183 posts

Posted 06 Feb 2012 Link to this post

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

Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
Rodolfo

5 posts

Member since:
Sep 2010

Posted 06 Feb 2012 Link to this post

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
Admin

1183 posts

Posted 06 Feb 2012 Link to this post

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

Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
Rodolfo

5 posts

Member since:
Sep 2010

Posted 06 Feb 2012 Link to this post

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

4 posts

Member since:
Aug 2010

Posted 14 Jun 2012 Link to this post

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
Admin

1183 posts
Posted 19 Jun 2012 Link to this post

Hello Josh,

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

Regards,
Bozhidar
the Telerik team

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.

ListBoxTransferServerEvents.zip
Josh

4 posts

Member since:
Aug 2010
Posted 19 Jun 2012 Link to this post

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

Three-List-Boxes.png
Rodolfo

5 posts

Member since:
Sep 2010
Posted 19 Jun 2012 Link to this post

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...

Capture.PNG
Josh

4 posts

Member since:
Aug 2010

Posted 19 Jun 2012 Link to this post

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
Admin

1183 posts

Posted 20 Jun 2012 Link to this post

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

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Josh

4 posts

Member since:
Aug 2010

Posted 20 Jun 2012 Link to this post

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

2 posts

Member since:
Jul 2016

Posted 06 Aug 2016 in reply to Bozhidar Link to this post

It works for me I forgeted to write commit changes

Transfer to multiple RadListBoxes using Drag and Drop

Martin

Bozhidar

Martin

Rodolfo

Bozhidar

Rodolfo

Bozhidar

Rodolfo

Josh

Bozhidar

Josh

Rodolfo

Josh

Bozhidar

Josh

Fatma