Transfer to multiple RadListBoxes using Drag and Drop

16 posts, 1 answers
  1. Martin
    Martin avatar
    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
  2. Answer
    Bozhidar
    Admin
    Bozhidar avatar
    1103 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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Martin
    Martin avatar
    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
  5. Rodolfo
    Rodolfo avatar
    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
  6. Bozhidar
    Admin
    Bozhidar avatar
    1103 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 >>
  7. Rodolfo
    Rodolfo avatar
    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%

     

     

  8. Bozhidar
    Admin
    Bozhidar avatar
    1103 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 >>
  9. Rodolfo
    Rodolfo avatar
    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
  10. Josh
    Josh avatar
    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
  11. Bozhidar
    Admin
    Bozhidar avatar
    1103 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.
  12. Josh
    Josh avatar
    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
  13. Rodolfo
    Rodolfo avatar
    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...



  14. Josh
    Josh avatar
    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
  15. Bozhidar
    Admin
    Bozhidar avatar
    1103 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.
  16. Josh
    Josh avatar
    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
  17. Fatma
    Fatma avatar
    2 posts
    Member since:
    Jul 2016

    Posted 06 Aug in reply to Bozhidar Link to this post

    It works for  me I forgeted to write commit changes
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017