Dropped Event postback across multiple RadListBoxes

7 posts, 1 answers
  1. Alex
    Alex avatar
    31 posts
    Member since:
    Jun 2011

    Posted 25 Feb 2013 Link to this post

    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?
  2. Nencho
    Admin
    Nencho avatar
    1458 posts

    Posted 27 Feb 2013 Link to this post

    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
    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. Alex
    Alex avatar
    31 posts
    Member since:
    Jun 2011

    Posted 27 Feb 2013 Link to this post

    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.
  5. Bozhidar
    Admin
    Bozhidar avatar
    1102 posts

    Posted 04 Mar 2013 Link to this post

    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
    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.
  6. Alex
    Alex avatar
    31 posts
    Member since:
    Jun 2011

    Posted 04 Mar 2013 Link to this post

    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.
  7. Answer
    Bozhidar
    Admin
    Bozhidar avatar
    1102 posts

    Posted 05 Mar 2013 Link to this post

    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
    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.
  8. Alex
    Alex avatar
    31 posts
    Member since:
    Jun 2011

    Posted 05 Mar 2013 Link to this post

    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 });
    }
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017