How to move ListBox items to another ListBox in ASPNet using jQuery

In this article I will explain how to move items from one ListBox to another ListBox in ASP.Net using jQuery.

This article also covers, how to fetch the items moved from the Left ListBox to the Right ListBox or vice versa on server side on Button click and preserve the items in the ListBoxes during PostBack.

HTML Markup

The HTML Markup consists of two ASP.Net ListBox controls, two Left and Right HTML Buttons and one ASP.Net Button. The Left ListBox control has been populated with different Fruit names while the Right ListBox control is kept empty.

<tr>

<td>

<asp:ListBox ID="lstLeft" runat="server" SelectionMode="Multiple" Width="80">

<asp:ListItem Text="Apple" Value="Apple" />

<asp:ListItem Text="Mango" Value="Mango" />

<asp:ListItem Text="Grapes" Value="Grapes" />

<asp:ListItem Text="Pineapple" Value="Pineapple" />

<asp:ListItem Text="Guava" Value="Guava" />

<asp:ListItem Text="Cherry" Value="Cherry" />

<asp:ListItem Text="Banana" Value="Banana" />

<asp:ListItem Text="Papaya" Value="Papaya" />

</asp:ListBox>

</td>

<td>

</td>

<td>

<asp:ListBox ID="lstRight" runat="server" SelectionMode="Multiple" Width="80"></asp:ListBox>

</td>

</tr>

</table>

<br />

<asp:Button ID="btnSubmit" Text="Submit" runat="server" OnClick="Submit" />

Moving Items of One ListBox to another using jQuery

Client Side jQuery Click event handlers has been attached to each of the Left and Right HTML Buttons and when any of these Buttons are clicked, their respective click event handlers move the selected items from one ListBox to another.

First the selected ListBox item is cloned and then it is removed from its ListBox collection. Then the cloned ListBox item is added to the other ListBox control using jQuery.

$(function () {

$("#left").bind("click", function () {

var options = $("[id*=lstRight] option:selected");

for (var i = 0; i < options.length; i++) {

var opt = $(options[i]).clone();

$(options[i]).remove();

$("[id*=lstLeft]").append(opt);

}

});

$("#right").bind("click", function () {

var options = $("[id*=lstLeft] option:selected");

for (var i = 0; i < options.length; i++) {

var opt = $(options[i]).clone();

$(options[i]).remove();

$("[id*=lstRight]").append(opt);

}

});

</script>

How to move ListBox items to another ListBox in ASP.Net using jQuery

Fetching the moved ListBox Values Server Side from the Right ListBox

Since we need to preserve the values of the both the ListBox controls, we need to send their values sever side through Form Posting. Hence the following script selects all the Items of both the ListBox controls when the Submit button is pressed. This is necessary as unless the items are selected they won’t be posted server side.

$(function () {

$("[id*=btnSubmit]").bind("click", function () {

$("[id*=lstLeft] option").attr("selected", "selected");

$("[id*=lstRight] option").attr("selected", "selected");

});

</script>

On Server Side, first the ListBox values are fetched from the Request.Form collection and then they are split into individual items as the values are delimited by comma character.

Then a loop is executed and each item is added to the ListBox after the ListBox is cleared. The same procedure is applied for the Right ListBox.

The above approach makes sure that ListBox controls retain the Items as they were swapped using jQuery during PostBack.

Finally the items present in each of the ListBox controls is displayed using JavaScript Alert Message Box, this I have done simply to show how we can fetch the values of ASP.Net controls that were modified using client side scripting on server side.

protected void Submit(object sender, EventArgs e)

{

string leftSelectedItems = Request.Form[lstLeft.UniqueID];

lstLeft.Items.Clear();

if (!string.IsNullOrEmpty(leftSelectedItems))

{

foreach (string item in leftSelectedItems.Split(','))

{

lstLeft.Items.Add(item);

}

string rightSelectedItems = Request.Form[lstRight.UniqueID];

lstRight.Items.Clear();

if (!string.IsNullOrEmpty(rightSelectedItems))

{

foreach (string item in rightSelectedItems.Split(','))

{

lstRight.Items.Add(item);

}

ClientScript.RegisterStartupScript(this.GetType(), "alert", "alert('Left ListBox Items: " + leftSelectedItems + "\\nRight ListBox Items: " + rightSelectedItems + "');", true);

}

VB.Net

Protected Sub Submit(sender As Object, e As EventArgs)

Dim leftSelectedItems As String = Request.Form(lstLeft.UniqueID)

lstLeft.Items.Clear()

If Not String.IsNullOrEmpty(leftSelectedItems) Then

For Each item As String In leftSelectedItems.Split(",")

lstLeft.Items.Add(item)

End If

Dim rightSelectedItems As String = Request.Form(lstRight.UniqueID)

lstRight.Items.Clear()

If Not String.IsNullOrEmpty(rightSelectedItems) Then

For Each item As String In rightSelectedItems.Split(",")

lstRight.Items.Add(item)

End If

ClientScript.RegisterStartupScript(Me.GetType(), "alert", "alert('Left ListBox Items: " & leftSelectedItems & "\nRight ListBox Items: " & rightSelectedItems & "');", True)

End Sub