Moving,Sorting and Searching Items between two Generic Listbox controls

 

I will explain you how to create user control using two listbox control and moving,filtering and searching items between them.First of all you should add two listbox and add the buttons like given below.

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="ucListBox.ascx.cs" Inherits="ucListBox" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

<script type="text/javascript" language="javascript">
    var ddlText, ddlValue, ddl, lblMesg;
    function CacheItems() {

        ddlText = new Array();
        ddlValue = new Array();
        ddl = document.getElementById("<%=lstAvailable.ClientID %>");

        for (var i = 0; i < ddl.options.length; i++) {
            ddlText[ddlText.length] = ddl.options[i].text;
            ddlValue[ddlValue.length] = ddl.options[i].value;
        }
    }
   
    window.onload = CacheItems;

    function FilterItems(value) {
    
        ddl.options.length = 0;
        for (var i = 0; i < ddlText.length; i++) {
            if (ddlText[i].toLowerCase().indexOf(value) != -1) {
                AddItem(ddlText[i], ddlValue[i]);
            }
        }

        if (ddl.options.length == 0) {
            AddItem("", "");
        }
    }

    function AddItem(text, value) {

        var opt = document.createElement("option");
        opt.text = text;
        opt.value = value;
        ddl = document.getElementById("<%=lstAvailable.ClientID %>");
        ddl.options.add(opt);
    }
 
</script>

<table width="100%" border="0">
    <tr>
        <td style="width: 19%; height: 24px;" runat="server" id="tdd">
            <span style="font-size: 8pt"><strong>
                <asp:Label runat="server" Text="Search" ID="lblSearch" meta:resourcekey="lblSearchResource1"></asp:Label>
            </strong></span>
        </td>
        <td>
            <asp:TextBox ID="txtSearch" runat="server" onkeyup="FilterItems(this.value)" meta:resourcekey="txtSearchResource1"></asp:TextBox><br />
        </td>
    </tr>
</table>
<table width="60%">
    <tr>
        <td>
        </td>
    </tr>
    <tr align="center">
        <td align="center">
            <!-- Start  list box-->
            <table width="100%">
                <tr>
                    <td valign="top">
                        <table border="0" width="100%">
                            <tr>
                                <td>
                                    <span style="font-size: 8pt"><strong>
                                        <asp:Label runat="server" ID="lblAvailable" Text="Available" meta:resourcekey="lblAvailableResource2"></asp:Label>
                                    </strong></span>
                                </td>
                            </tr>
                            <tr>
                                <td style="height: 200px">
                                    <asp:ListBox ID="lstAvailable" runat="server" Font-Size="8pt" Height="100%" SelectionMode="Multiple"
                                        Width="300px" meta:resourcekey="lstAvailableResource1"></asp:ListBox>
                                </td>
                            </tr>
                        </table>
                    </td>
                    <td align="center" valign="top">
                        <table border="0" cellpadding="0" cellspacing="0">
                            <tr>
                                <td>
                                    <br />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <br />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <asp:ImageButton ID="btnAddAll" runat="server" ImageUrl="~/Images/Last.png" CausesValidation="False" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <asp:ImageButton ID="btnAdd" runat="server" ImageUrl="~/Images/Next.png" CausesValidation="False" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <asp:ImageButton ID="btnRemove" runat="server" CausesValidation="False" ImageUrl="~/Images/Previous.png" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <asp:ImageButton ID="btnRemoveAll" runat="server" CausesValidation="False" ImageUrl="~/Images/First.png" />
                                </td>
                            </tr>
                        </table>
                    </td>
                    <td valign="top">
                        <table width="100%">
                            <tr>
                                <td>
                                    <span style="font-size: 8pt"><strong>
                                        <asp:Label runat="server" ID="lblAdded" Text="Added" meta:resourcekey="lblAddedResource2"></asp:Label>
                                    </strong></span>
                                </td>
                            </tr>
                            <tr>
                                <td style="height: 200px">
                                    <asp:ListBox ID="lstAdded" runat="server" Font-Size="8pt" Height="100%" SelectionMode="Multiple"
                                        Width="300px" meta:resourcekey="lstAddedResource1"></asp:ListBox>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                </td>
                            </tr>
                        </table>
                    </td>
                    <td>
                        <table width="100%">
                            <tr>
                                <td>
                                    <asp:ImageButton ID="btnMoveUp" runat="server" CausesValidation="False" ImageUrl="~/Images/MoveUp.png" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <asp:ImageButton ID="btnMoveDown" runat="server" CausesValidation="False" ImageUrl="~/Images/Movedown.png" />
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
            <!-- end  list box-->
        </td>
    </tr>
</table>

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

using System;
using System.Collections.Generic;

using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Collections;

public partial class ucListBox : System.Web.UI.UserControl
{

    #region Property
    private IList _DataSourceAvailable = null;
    private IList _DataSourceAdded = null;
    private string _dataTextFieldAvailable = string.Empty;
    private string _dataValueFieldAvailable = string.Empty;
    private string _dataTextFieldAdded = string.Empty;
    private string _dataValueFieldAdded = string.Empty;
    private string _availableItemText = "Available Items";
    private string _addedItemText =  "Added Items";
    protected ArrayList arlList = new ArrayList();

    /// <summary>
    /// Gets or sets the available item text.
    /// </summary>
    /// <value>The available item text.</value>
    /// 
   
    public string AvailableItemText {
        get { return _availableItemText; }
        set { _availableItemText = value; }
    }

    /// <summary>
    /// Gets or sets the added items text.
    /// </summary>
    /// <value>The added items text.</value>
    public string AddedItemsText
    {
        get { return _addedItemText; }
        set { _addedItemText = value; }
    }

    /// <summary>
    /// Gets the available items.
    /// </summary>
    /// <value>The available items.</value>
    public ListItemCollection AvailableItems
    {
        get { return lstAvailable.Items; }
    }

    /// <summary>
    /// Gets the added items.
    /// </summary>
    /// <value>The added items.</value>
    public ListItemCollection AddedItems
    {
        get { return lstAdded.Items; }
    }

    /// <summary>
    /// Gets or sets the data source for the available items listbox.
    /// </summary>
    /// <value>The data source for available items.</value>
    public IList DataSourceAvailable
    {
        get { return _DataSourceAvailable; }
        set { _DataSourceAvailable = value; }
    }

    /// <summary>
    /// Gets or sets the data source for the added items listbox.
    /// </summary>
    /// <value>The data source for added items.</value>
    public IList DataSourceAdded
    {
        get { return _DataSourceAdded; }
        set { _DataSourceAdded = value; }
    }

    /// <summary>
    /// Gets or sets the data text field available.
    /// </summary>
    /// <value>The data text field available.</value>
    public string DataTextFieldAvailable
    {
        get { return _dataTextFieldAvailable; }
        set { _dataTextFieldAvailable = value; }
    }

    /// <summary>
    /// Gets or sets the data value field available.
    /// </summary>
    /// <value>The data value field available.</value>
    public string DataValueFieldAvailable
    {
        get { return _dataValueFieldAvailable; }
        set { _dataValueFieldAvailable = value; }
    }

    /// <summary>
    /// Gets or sets the data text field added.
    /// </summary>
    /// <value>The data text field added.</value>
    public string DataTextFieldAdded
    {
        get { return _dataTextFieldAdded; }
        set { _dataTextFieldAdded = value; }
    }

    /// <summary>
    /// Gets or sets the data value field added.
    /// </summary>
    /// <value>The data value field added.</value>
    public string DataValueFieldAdded
    {
        get { return _dataValueFieldAdded; }
        set { _dataValueFieldAdded = value; }
    }
    #endregion

    #region Method
    protected void Page_Load(object sender, EventArgs e)
    {


    }
    protected override void OnInit(EventArgs e)
    {
        base.OnInit(e);
        Initializer();

    }
    public void Initializer()
    {
        btnAdd.Click += new ImageClickEventHandler(btnAdd_Click);
        btnAddAll.Click += new ImageClickEventHandler(btnAddAll_Click);
        btnRemove.Click += new ImageClickEventHandler(btnRemove_Click);
        btnRemoveAll.Click += new ImageClickEventHandler(btnRemoveAll_Click);
        btnMoveUp.Click += new ImageClickEventHandler(btnMoveUp_Click);
        btnMoveDown.Click += new ImageClickEventHandler(btnMoveDown_Click);
        lblAdded.Text = this.AddedItemsText;
        lblAvailable.Text = this.AvailableItemText;
    }



    public void BindAvailableList()
    {
        //Set the Header Text of the Available and Added Items
        lblAdded.Text = this.AddedItemsText;
        lblAvailable.Text = this.AvailableItemText;

        //Bind the Added List Control
        lstAvailable.DataSource = this.DataSourceAvailable;
        lstAvailable.DataTextField = this.DataTextFieldAvailable;
        lstAvailable.DataValueField = this.DataValueFieldAvailable;
        lstAvailable.DataBind();
    }
    public void BindAddedList()
    {
        //Set the Header Text of the Available and Added Items
        lblAdded.Text = this.AddedItemsText;
        lblAvailable.Text = this.AvailableItemText;

        //Bind the Available List Control
        lstAdded.DataSource = this.DataSourceAdded;
        lstAdded.DataTextField = this.DataTextFieldAdded;
        lstAdded.DataValueField = this.DataValueFieldAdded;
        lstAdded.DataBind();
    }

    public void BindList()
    {
        //Set the Header Text of the Available and Added Items
        lblAdded.Text = this.AddedItemsText;
        lblAvailable.Text = this.AvailableItemText;

        //Bind the Available and Added List Controls
        lstAdded.DataSource = this.DataSourceAdded;
        lstAdded.DataTextField = this.DataTextFieldAdded;
        lstAdded.DataValueField = this.DataValueFieldAdded;
        lstAdded.DataBind();

        lstAvailable.DataSource = this.DataSourceAvailable;
        lstAvailable.DataTextField = this.DataTextFieldAvailable;
        lstAvailable.DataValueField = this.DataValueFieldAvailable;
        lstAvailable.DataBind();


        #region Remove intersection Record
        ArrayList ary = new ArrayList();

        for (int i = 0; i < lstAvailable.Items.Count; i++)
        {
            for (int j = 0; j < lstAdded.Items.Count; j++)
            {

                if (lstAvailable.Items[i].Value == lstAdded.Items[j].Value)
                {
                    // lstAvailable.RemoveAt(i);
                    if (!ary.Contains(lstAvailable.Items[i]))
                    {
                        ary.Add(lstAvailable.Items[i]);
                        j = -1;
                    }
                    break;
                }

            }

        }
        for (int i = 0; i < ary.Count; i++)
        {
            lstAvailable.Items.Remove(((ListItem)ary[i]));

        }

        #endregion

        ScriptManager.RegisterStartupScript(Page, typeof(Page), "myscript", "CacheItems();", true);
        //ScriptManager.RegisterStartupScript(Page, typeof(Page), "myscript", "UploadFileToParent();", true);
    }

    #endregion

    #region Navigation

    /// <summary>
    /// Add all the selected items from the Available Items to the Added Items
    /// </summary>
    /// <param name="sender">The source of the event.</param>
    /// <param name="e">The <see cref="System.EventArgs"/> instance containing the event data.</param>
    protected void btnAdd_Click(object sender, EventArgs e)
    {
        if (lstAvailable.SelectedIndex >= 0)
        {
            for (int i = 0; i < lstAvailable.Items.Count; i++)
            {
                if (lstAvailable.Items[i].Selected)
                {
                    if (!arlList.Contains(lstAvailable.Items[i]))
                        arlList.Add(lstAvailable.Items[i]);
                }
            }
            for (int i = 0; i < arlList.Count; i++)
            {
                if (!lstAdded.Items.Contains((ListItem)arlList[i]))
                    lstAdded.Items.Add((ListItem)arlList[i]);
                lstAvailable.Items.Remove((ListItem)arlList[i]);
            }
        }
    }

    /// <summary>
    /// Add all the items from the Available items to the Added Items
    /// </summary>
    /// <param name="sender">The source of the event.</param>
    /// <param name="e">The <see cref="System.EventArgs"/> instance containing the event data.</param>
    protected void btnAddAll_Click(object sender, EventArgs e)
    {
        foreach (ListItem list in lstAvailable.Items)
        {
            lstAdded.Items.Add(list);
        }
        lstAvailable.Items.Clear();
    }

    /// <summary>
    /// Moves the Selected items from the Added items to the Available items
    /// </summary>
    /// <param name="sender">The source of the event.</param>
    /// <param name="e">The <see cref="System.EventArgs"/> instance containing the event data.</param>
    protected void btnRemove_Click(object sender, EventArgs e)
    {
        if (lstAdded.SelectedIndex >= 0)
        {
            for (int i = 0; i < lstAdded.Items.Count; i++)
            {
                if (lstAdded.Items[i].Selected)
                {
                    if (!arlList.Contains(lstAdded.Items[i]))
                        arlList.Add(lstAdded.Items[i]);
                }
            }
            for (int i = 0; i < arlList.Count; i++)
            {
                if (!lstAvailable.Items.Contains((ListItem)arlList[i]))
                    lstAvailable.Items.Add((ListItem)arlList[i]);
                lstAdded.Items.Remove((ListItem)arlList[i]);
            }
        }
    }

    /// <summary>
    /// Moves all the items from the Added items to the Available items
    /// </summary>
    /// <param name="sender">The source of the event.</param>
    /// <param name="e">The <see cref="System.EventArgs"/> instance containing the event data.</param>
    protected void btnRemoveAll_Click(object sender, EventArgs e)
    {
        foreach (ListItem list in lstAdded.Items)
        {
            lstAvailable.Items.Add(list);
        }
        lstAdded.Items.Clear();
    }

    /// <summary>
    /// Move item to upwards
    /// </summary>
    /// <param name="sender"></param>
    /// <param name="e"></param>
    void btnMoveDown_Click(object sender, ImageClickEventArgs e)
    {
        try
        {
            int startindex = lstAdded.Items.Count - 1;
            for (int i = startindex; i > -1; i--)
            {
                if (lstAdded.Items[i].Selected)//identify the selected item
                {
                    //swap with the lower item(move down)
                    if (i < startindex && !lstAdded.Items[i + 1].Selected)
                    {
                        ListItem bottom = lstAdded.Items[i];
                        lstAdded.Items.Remove(bottom);
                        lstAdded.Items.Insert(i + 1, bottom);
                        lstAdded.Items[i + 1].Selected = true;
                    }

                }
            }
        }
        catch (Exception ex)
        {

        }
    }

    /// <summary>
    /// Move Item To down Words
    /// </summary>
    /// <param name="sender"></param>
    /// <param name="e"></param>
    void btnMoveUp_Click(object sender, ImageClickEventArgs e)
    {
        try
        {
            for (int i = 0; i < lstAdded.Items.Count; i++)
            {
                if (lstAdded.Items[i].Selected)//identify the selected item
                {
                    //swap with the top item(move up)
                    if (i > 0 && !lstAdded.Items[i - 1].Selected)
                    {
                        ListItem bottom = lstAdded.Items[i];
                        lstAdded.Items.Remove(bottom);
                        lstAdded.Items.Insert(i - 1, bottom);
                        lstAdded.Items[i - 1].Selected = true;
                    }
                }
            }

        }
        catch (Exception ex)
        {

        }
    }

    #endregion
}