Geeks With Blogs

News

Microsoft MVP


DZone MVB


Moderator at CodeASP.NET


Quiz Master







free counters
Free counters
Added on January 19,2012


Follow Me @vmsdurano

A bit About Me



Disclaimer
The opinions expressed herein are my own personal opinions and does not represent the opinions of my employers. Nor does it represent the opinion of my dog, because I don’t have one.


Vinz' Blog (ProudMonkey) "Code, Beer and Music ~ my way of being a programmer"

This example shows how to move items between two ListBox. Basically it allows you to add, remove and move multiple list items at a time.

To start, let’s set up our GUI. Just for simplicity of this demo, I set up the web form like this:

   1:  <head runat="server">
   2:      <title>Moving ListItems between two ListBox</title>
   3:  </head>
   4:  <body>
   5:      <form id="form1" runat="server">
   6:      <div>
   7:        <table>
   8:              <tr>
   9:                  <td ><asp:ListBox ID="ListBox1" runat="server"
  10:                                    SelectionMode="Multiple" 
  11:                                    Width="150px" 
  12:                                    Height="150px">
  13:                       </asp:ListBox>
  14:                  </td>
  15:                  <td valign="middle" align="center" style="width:100px">
  16:                      <asp:Button ID="ButtonAdd" runat="server" 
  17:                                  Text=">" 
  18:                                  OnClick="ButtonAdd_Click"  
  19:                                  Width="50px"/><br />
  20:   
  21:                      <asp:Button ID="ButtonRemove" runat="server" 
  22:                                  Text="<" 
  23:                                  OnClick="ButtonRemove_Click" 
  24:                                  Width="50px"/> <br />
  25:   
  26:                      <asp:Button ID="ButtonAddAll" runat="server" 
  27:                                  Text =">>>" 
  28:                                  OnClick="ButtonAddAll_Click" 
  29:                                  Width="50px"/> 
  30:                      <br />
  31:   
  32:                      <asp:Button ID="ButtonRemoveAll" runat="server" 
  33:                                  Text ="<<<" 
  34:                                  OnClick="ButtonRemoveAll_Click" 
  35:                                  Width="50px"/>
  36:                  </td>
  37:                  <td>
  38:                     <asp:ListBox ID="ListBox2" runat="server"
  39:                                  SelectionMode="Multiple" 
  40:                                  Width="150px" 
  41:                                  Height="150px">
  42:                     </asp:ListBox>
  43:                  </td>
  44:              </tr>
  45:        </table>
  46:      </div>
  47:      </form>
  48:  </body>
  49:   
  50:  </html>

 

Please note that we need to set property SelectionMode to Multiple to allow you select and move multiple items by holding Ctrl + Click.

In this demo, I presumed that you already bind your ListBox with data from the database. If you are not familiar for binding your ListBox with data then you can refer to my previous example on “Binding DropDownList, ListBox and CheckBoxList the Ado.net way”.

Now let’s, create a method for Moving the items between two ListBox. Here’s the code block below:

   1:      private void MoveItems(bool isAdd)
   2:      {
   3:          if (isAdd)// means if you add items to the right box
   4:          {
   5:              for (int i = ListBox1.Items.Count - 1; i >= 0; i--)
   6:              {
   7:                  if (ListBox1.Items[i].Selected)
   8:                  {
   9:                      ListBox2.Items.Add(ListBox1.Items[i]);
  10:                      ListBox2.ClearSelection();
  11:                      ListBox1.Items.Remove(ListBox1.Items[i]);
  12:                  }
  13:              }
  14:          }
  15:          else // means if you remove items from the right box and add it back to the left box
  16:          {
  17:              for (int i = ListBox2.Items.Count - 1; i >= 0; i--)
  18:              {
  19:                  if (ListBox2.Items[i].Selected)
  20:                  {
  21:                      ListBox1.Items.Add(ListBox2.Items[i]);
  22:                      ListBox1.ClearSelection();
  23:                      ListBox2.Items.Remove(ListBox2.Items[i]);
  24:                  }
  25:              }
  26:          }
  27:      }
  28:   
  29:      private void MoveAllItems(bool isAddAll)
  30:      {
  31:          if (isAddAll)// means if you add ALL items to the right box
  32:          {
  33:              for (int i = ListBox1.Items.Count - 1; i >= 0; i--)
  34:              {
  35:                      ListBox2.Items.Add(ListBox1.Items[i]);
  36:                      ListBox2.ClearSelection();
  37:                      ListBox1.Items.Remove(ListBox1.Items[i]);
  38:              }
  39:          }
  40:          else // means if you remove ALL items from the right box and add it back to the left box
  41:          {
  42:              for (int i = ListBox2.Items.Count - 1; i >= 0; i--)
  43:              {
  44:                      ListBox1.Items.Add(ListBox2.Items[i]);
  45:                      ListBox1.ClearSelection();
  46:                      ListBox2.Items.Remove(ListBox2.Items[i]);
  47:              }
  48:          }
  49:      }

 

MoveItems() method takes a bool parameter which  tells the method to execute add or remove ListItems. True if you Add and False if you Remove.

MoveAllItems() method also takes a bool parameter which  tells the method to execute "add al"l or "remove all ListItemsbetween ListBox. True if you Add All and False if you Remove All. The main difference of the method MoveAllItems() compared to MoveItems() method is we don’t need to check the Selected ListItems in the ListBox, but instead we simply loops through the ListItems to execute Add All or Remove All ListItems at once.

Here are the code blocks for calling those methods at the corresponding Button Click events.

   1:      protected void ButtonAdd_Click(object sender, EventArgs e)
   2:      {
   3:          MoveItems(true);// true since we add
   4:      }
   5:   
   6:      protected void ButtonRemove_Click(object sender, EventArgs e)
   7:      {
   8:          MoveItems(false); // false since we remove
   9:      }
  10:   
  11:      protected void ButtonAddAll_Click(object sender, EventArgs e)
  12:      {
  13:          MoveAllItems(true); // true since we add all
  14:      }
  15:   
  16:      protected void ButtonRemoveAll_Click(object sender, EventArgs e)
  17:      {
  18:          MoveAllItems(false); // false means re remove all
  19:      }

 

The output would look like below when you run the page.

That's it!

Hope someone find this useful!

Technorati Tags: ,
Posted on Tuesday, February 24, 2009 5:41 PM ASP.NET , C# | Back to top


Comments on this post: Moving ListItems between Two ListBox – Server Side Approach

# re: Moving ListItems between Two ListBox – Server Side Approach
Requesting Gravatar...
Nice piece of code! Works good! Well done!
Left by Alex on Mar 24, 2009 3:38 PM

# re: Moving ListItems between Two ListBox – Server Side Approach
Requesting Gravatar...
Nice work, works great.
Left by lina on Apr 24, 2009 8:34 AM

# re: Moving ListItems between Two ListBox – Server Side Approach
Requesting Gravatar...
Hi,
It is really works nicely and thanks ...great job.
Left by Siva on May 17, 2009 8:45 PM

# re: Moving ListItems between Two ListBox – Server Side Approach
Requesting Gravatar...
But how do I get these changes back to the database. I mean, if ListBox1 and ListBox2 are bound to different tables in my database, I want the movement of the ListItems to be reflected in the DB.
Left by Sam on Jun 29, 2009 10:27 AM

# re: Moving ListItems between Two ListBox – Server Side Approach
Requesting Gravatar...
Hey thanks. it worked..
Left by Vinstein on Jul 27, 2009 7:35 PM

# re: Moving ListItems between Two ListBox – Server Side Approach
Requesting Gravatar...
Hi..Really good emaple..iot helped me alot
Left by chandu on Aug 14, 2009 2:19 AM

# re: Moving ListItems between Two ListBox – Server Side Approach
Requesting Gravatar...
Thanks this excellent!!! plug and play... nice :-)
Left by Gavin on Mar 04, 2010 3:28 PM

# re: Moving ListItems between Two ListBox – Server Side Approach
Requesting Gravatar...
Excellent X)! Works g8!
Left by Paua on Mar 29, 2010 10:59 AM

# re: Moving ListItems between Two ListBox – Server Side Approach
Requesting Gravatar...
When you use this code in .net 3.5 it fails.
Once you remove the item the count goes down and the index then becomes out of range. Any ideas?
Left by CaveBoy on Jul 06, 2010 11:28 PM

# re: Moving ListItems between Two ListBox – Server Side Approach
Requesting Gravatar...
Nice work. Thanks for the code. Almost all of what I need.

I'm going to add a few things.

1. An UP and DOWN button under the right text box to help reordering items.

Regarding this point, I'm not sure how I am going to handle reordering if they select more than one item. Lets say there is a list of 10 items, and the CTRL selected items 1, 4, 6 and 7, and hits the UP button. (my brain hurts thinking about it) :)

2. The list on the left will be alphabetically ordered when you first load it. I want to to remain in that order when items are moved back to it from the right.

@Caveboy. For what it's worth I dropped this code into a 3.5 project it worked first go.

Left by Brad on Nov 03, 2010 2:55 PM

# re: Moving ListItems between Two ListBox – Server Side Approach
Requesting Gravatar...
You did a great job. Thank you ~Kumar Sethuraman~
Left by Kumar Sethuraman on Feb 17, 2011 9:41 PM

# re: Moving ListItems between Two ListBox – Server Side Approach
Requesting Gravatar...
Thanks u so much dear .its properly working and i was stuck in listbox bcz when i wana to remove item from list 1 and add it on right side in list2 i got exception .now ur post really help me .thanks once again
Left by Sardar waqas ahmed on Apr 27, 2011 4:19 AM

# re: Moving ListItems between Two ListBox – Server Side Approach
Requesting Gravatar...
Thanks that was really great work done guys..thanks again for help.
Left by Amrik on Oct 21, 2011 6:56 PM

# re: Moving ListItems between Two ListBox – Server Side Approach
Requesting Gravatar...
Very good.
helped quite!!
Thanks for help.


Left by Diego G. Dias on Jan 12, 2013 4:23 AM

comments powered by Disqus

Copyright © Vincent Maverick Durano | Powered by: GeeksWithBlogs.net