This example demonstrates on 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:
|
<head runat="server">
<title>Moving ListItems between two ListBox</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<table>
<tr>
<td ><asp:ListBox ID="ListBox1" runat="server" SelectionMode="Multiple" Width="150px" Height="150px"></asp:ListBox></td>
<td valign="middle" align="center" style="width:100px">
<asp:Button ID="ButtonAdd" runat="server" Text=">" OnClick="ButtonAdd_Click" Width="50px"/><br />
<asp:Button ID="ButtonRemove" runat="server" Text="<" OnClick="ButtonRemove_Click" Width="50px"/> <br />
<asp:Button ID="ButtonAddAll" runat="server" Text =">>>" OnClick="ButtonAddAll_Click" Width="50px"/>
<br />
<asp:Button ID="ButtonRemoveAll" runat="server" Text ="<<<" OnClick="ButtonRemoveAll_Click" Width="50px"/>
</td>
<td><asp:ListBox ID="ListBox2" runat="server" SelectionMode="Multiple" Width="150px" Height="150px"></asp:ListBox></td>
</tr>
</table>
</div>
</form>
</body>
</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:
|
private void MoveItems(bool isAdd)
{
if (isAdd)// means if you add items to the right box
{
for (int i = ListBox1.Items.Count - 1; i >= 0; i--)
{
if (ListBox1.Items[i].Selected)
{
ListBox2.Items.Add(ListBox1.Items[i]);
ListBox2.ClearSelection();
ListBox1.Items.Remove(ListBox1.Items[i]);
}
}
}
else // means if you remove items from the right box and add it back to the left box
{
for (int i = ListBox2.Items.Count - 1; i >= 0; i--)
{
if (ListBox2.Items[i].Selected)
{
ListBox1.Items.Add(ListBox2.Items[i]);
ListBox1.ClearSelection();
ListBox2.Items.Remove(ListBox2.Items[i]);
}
}
}
}
private void MoveAllItems(bool isAddAll)
{
if (isAddAll)// means if you add ALL items to the right box
{
for (int i = ListBox1.Items.Count - 1; i >= 0; i--)
{
ListBox2.Items.Add(ListBox1.Items[i]);
ListBox2.ClearSelection();
ListBox1.Items.Remove(ListBox1.Items[i]);
}
}
else // means if you remove ALL items from the right box and add it back to the left box
{
for (int i = ListBox2.Items.Count - 1; i >= 0; i--)
{
ListBox1.Items.Add(ListBox2.Items[i]);
ListBox1.ClearSelection();
ListBox2.Items.Remove(ListBox2.Items[i]);
}
}
}
|
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 ListItems" between 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.
|
protected void ButtonAdd_Click(object sender, EventArgs e)
{
MoveItems(true);// true since we add
}
protected void ButtonRemove_Click(object sender, EventArgs e)
{
MoveItems(false); // false since we remove
}
protected void ButtonAddAll_Click(object sender, EventArgs e)
{
MoveAllItems(true); // true since we add all
}
protected void ButtonRemoveAll_Click(object sender, EventArgs e)
{
MoveAllItems(false); // false means re remove all
}
|
The output would look like below when you run the page.
That's it!