Home / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > ListBox > Transfer to multiple RadListBoxes using Drag and Drop

• Martin

  Posted on Jan 18, 2012 (permalink)

  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

  Reply

• Answer Bozhidar Bozhidar

  Posted on Jan 19, 2012 (permalink)

  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

  Reply


• Martin

  Posted on Jan 19, 2012 (permalink)

  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

  Reply

• Rodolfo

  Posted on Feb 4, 2012 (permalink)

  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
  

  Reply

• Bozhidar Bozhidar

  Posted on Feb 6, 2012 (permalink)

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

  Reply

• Rodolfo

  Posted on Feb 6, 2012 (permalink)

  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%

   

   

  Reply

• Bozhidar Bozhidar

  Posted on Feb 6, 2012 (permalink)

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

  Reply

• Rodolfo

  Posted on Feb 6, 2012 (permalink)

  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
  

  Reply

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > ListBox > Transfer to multiple RadListBoxes using Drag and Drop