Javascript to Transfer Data from one ListBox to another ListBox considering Postback using Asp.Net C# VB.Net

ListBox Control provides us a lot of functionalities. We can use ListBox Control features to provide rich user interface. If we need to choose a list of values from a set of values then at first we think ListBox Control to implement the feature. That’s why in this article I will describe “How we can move one or multiple selected items of a ListBox to another ListBox using Javascript“. By using this example you can move all ListBox items at a time also. In most examples we found that we can transfer selected values using Javascript but we can not find those values after a post back event. This article also cover this postback issue.

Related Article:
JQuery to Move Data from one ListBox to another ListBox considering Postback using Asp.Net C# VB.Net

Javascript Transfer Data from one ListBox to another ListBox Asp.Net Csharp VB.Net

To do the Example Prepare the HTML like Below:

<table border="0" cellpadding="0" cellspacing="0">
            <asp:ListBox ID="lstLeft" runat="server" SelectionMode="Multiple" Width="100" Height="200">
                <asp:ListItem Text="January" Value="1" />
                <asp:ListItem Text="Februray" Value="2" />
                <asp:ListItem Text="March" Value="3" />
                <asp:ListItem Text="April" Value="4" />
                <asp:ListItem Text="May" Value="5" />
                <asp:ListItem Text="June" Value="6" />
                <asp:ListItem Text="July" Value="7" />
                <asp:ListItem Text="August" Value="8" />
                <asp:ListItem Text="September" Value="9" />
                <asp:ListItem Text="October" Value="10" />
                <asp:ListItem Text="November" Value="11" />
                <asp:ListItem Text="December" Value="12" />
        <asp:Button ID="BtnRight" runat="server" Text=">" OnClientClick="return MoveItems('R', 0);" /><br /><br />
        <asp:Button ID="BtnLeft" runat="server" Text="<"  OnClientClick="return MoveItems('L', 0);"/><br /><br />
        <asp:Button ID="BtnRightAll" runat="server" Text=">>"  OnClientClick="return MoveItems('R', 1);" /><br /><br />
        <asp:Button ID="BtnLeftAll" runat="server" Text="<<"  OnClientClick="return MoveItems('L', 1);" />        
            <asp:ListBox ID="lstRight" runat="server" SelectionMode="Multiple" Width="100" Height="200"></asp:ListBox>
<br />
<asp:Button ID="btnSubmit" Text="Submit" runat="server" OnClientClick="selectall();" onclick="btnSubmit_Click" />
<br />
<hr />

        <td  valign="top"><asp:Label ID="Label1" runat="server" Text="Left ListBox Items:<br/>"></asp:Label></td>
        <td valign="top"><asp:Label ID="Label2" runat="server" Text="Right ListBox Items:<br/>"></asp:Label></td>

Javascript Method to Move Items between ListBox:

<script type="text/javascript">
    function MoveItems(Direction, All) {
        var LstLeft;
        var LstRight;
        var Removed = '';
        var i;

        if (Direction == 'R') {
            var LstLeft = document.getElementById("<%=lstLeft.ClientID %>");
            var LstRight = document.getElementById("<%=lstRight.ClientID %>");
        else {
            var LstLeft = document.getElementById("<%=lstRight.ClientID %>");
            var LstRight = document.getElementById("<%=lstLeft.ClientID %>");

        for (i = 0; i < LstLeft.length; i++) {
            if (LstLeft.options[i].selected || All == 1)
                if (ItemExists(LstRight, LstLeft.options[i].value) == 0) {
                    LstRight[LstRight.length] = new Option(LstLeft.options[i].text, LstLeft.options[i].value, true);
                    Removed = Removed + LstLeft.options[i].value + ',';
        RemoveFromList(LstLeft, Removed);
        return false;

    function RemoveFromList(Lst, Items) {
        var Removed = Items.split(',');
        var j;
        var x;
        for (j = 0; j < Removed.length; j++) {
            for (x = 0; x < Lst.length; x++) {
                if (Lst.options[x] != null && Lst.options[x].value == Removed[j]) {
                    Lst.options[x] = null;

    function ItemExists(Lst, value) {
        var Flag = 0;
        var i = 0;
        for (i = 0; i < Lst.length; i++) {
            if (Lst.options[i].value == value) {
                Flag = 1;
        return Flag;

At this stage we are able to move items between two ListBoxes. But the problem is, if you need to work on moved items in postback or from server side then you will get blank values in both ListBox control. I promised earlier that I will show the way how we can resolve the postback issue. The first trick is after postback we can get only selected items of both ListBox by using Request.Form[ListBox1.UniqueID]. So what we need to do? We need to auto select all items of both ListBox Control first. After that from server side we need to rebind again.

Javascript code to Auto Select all Items:

<script type="text/javascript">
    function selectall() {
        for (i = 0; i < document.getElementById("<%=lstLeft.ClientID %>").options.length; i++)
            document.getElementById("<%=lstLeft.ClientID %>").options[i].selected = true;

        for (i = 0; i < document.getElementById("<%=lstRight.ClientID %>").options.length; i++)
            document.getElementById("<%=lstRight.ClientID %>").options[i].selected = true;

Now Get all Items after Submit and Rebind to both ListBox:
C# Code:

    protected void btnSubmit_Click(object sender, EventArgs e)
        string leftAllItems = Request.Form[lstLeft.UniqueID];
        if (!string.IsNullOrEmpty(leftAllItems))
            foreach (string item in leftAllItems.Split(','))
                ListItem oItem = new ListItem(GetMonth(Convert.ToInt32(item)),item);
        string rightAllItems = Request.Form[lstRight.UniqueID];
        if (!string.IsNullOrEmpty(rightAllItems))
            foreach (string item in rightAllItems.Split(','))
                ListItem oItem = new ListItem(GetMonth(Convert.ToInt32(item)), item);

        Label1.Text = "Left ListBox Items:<br/>";
        if (!string.IsNullOrEmpty(leftAllItems))
            foreach (string oMonth in leftAllItems.Split(','))
                Label1.Text = Label1.Text + GetMonth(Convert.ToInt32(oMonth)) + "<br/>";

        Label2.Text = "Right ListBox Items:<br/>";
        if (!string.IsNullOrEmpty(rightAllItems))
        foreach (string oMonth in rightAllItems.Split(','))
            Label2.Text = Label2.Text + GetMonth(Convert.ToInt32(oMonth)) + "<br/>";

    private string GetMonth(int nMonthNo)
        // Here you need to maintain a data table to map id with value text
        // Because in Request.Form you only get the Value not Text
        switch (nMonthNo)
            case 1: return "January";
            case 2: return "February";
            case 3: return "March";
            case 4: return "April";
            case 5: return "May";
            case 6: return "June";
            case 7: return "July";
            case 8: return "August";
            case 9: return "September";
            case 10: return "October";
            case 11: return "November";
            case 12: return "December";
        return "";

VB.Net Code:

    Protected Sub btnSubmit_Click(sender As Object, e As EventArgs)
        Dim leftAllItems As String = Request.Form(lstLeft.UniqueID)
        If Not String.IsNullOrEmpty(leftAllItems) Then
            For Each item As String In leftAllItems.Split(","c)
                Dim oItem As New ListItem(GetMonth(Convert.ToInt32(item)), item)
        End If
        Dim rightAllItems As String = Request.Form(lstRight.UniqueID)
        If Not String.IsNullOrEmpty(rightAllItems) Then
            For Each item As String In rightAllItems.Split(","c)
                Dim oItem As New ListItem(GetMonth(Convert.ToInt32(item)), item)
        End If

        Label1.Text = "Left ListBox Items:<br/>"
        If Not String.IsNullOrEmpty(leftAllItems) Then
            For Each oMonth As String In leftAllItems.Split(","c)
                Label1.Text = Label1.Text + GetMonth(Convert.ToInt32(oMonth)) & "<br/>"
        End If

        Label2.Text = "Right ListBox Items:<br/>"
        If Not String.IsNullOrEmpty(rightAllItems) Then
            For Each oMonth As String In rightAllItems.Split(","c)
                Label2.Text = Label2.Text + GetMonth(Convert.ToInt32(oMonth)) & "<br/>"
        End If
    End Sub

    Private Function GetMonth(nMonthNo As Integer) As String
        ' Here you need to maintain a data table to map id with value text
        ' Because in Request.Form you only get the Value not Text
        Select Case nMonthNo
            Case 1
                Return "January"
            Case 2
                Return "February"
            Case 3
                Return "March"
            Case 4
                Return "April"
            Case 5
                Return "May"
            Case 6
                Return "June"
            Case 7
                Return "July"
            Case 8
                Return "August"
            Case 9
                Return "September"
            Case 10
                Return "October"
            Case 11
                Return "November"
            Case 12
                Return "December"
        End Select
        Return ""
    End Function

Note: Why we need GetMonth() function? After postback we get only values from a ListBox not Text. To get text we need a function which will map the ID value with the corresponding Text value.

One Common Error:
If you run the project you will get an error like “Invalid postback or callback argument..“. To resolve the error add EnableEventValidation=”false” in your page directives.

Now run the project. Hope you will get all items after transfer from one to another in postback. Still not clear? Download my code samples from below:

Download Code Example C#        Download Code Example VB.Net

Posted in .Net,, C#, Client, Javascript, ListBox, VB.Net

Leave a Reply

Your email address will not be published. Required fields are marked *