Microsoft Dot Net Master

Microsoft Dot Net Master
Microsoft Dot Net Master

Wednesday, February 2, 2011

Moving ListItems between Two ListBox – Server Side Approach

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:

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








1 comment:

  1. This is such a great resource that you are providing and you give it away for free. I love seeing blog that understand the value of providing a quality resource for free. residential movers

    ReplyDelete