javascript to Move List Items Up and Down of a ListBox in Asp.Net C# VB.Net

In many cases we need to prioritize a List. ListBox control is the perfect choice for developers to implement such things elegantly. That’s why today I have decided to post “How we can move up and down selected ListItem using Javascript“. But one thing we need to keep in mind that when we move up and down a ListItem we do not find the sorted or prioritized list in postback or codebehind. In this article I will also handle this postback issue.

Related Article:
JQuery to Move List Items Up and Down of a ListBox in Asp.Net C# VB.Net

Move List Items Up and Down Using javascript in ASP.Net ListBox control csharp VB.Net

To do the Example prepare the HTML like below:

    <td rowspan=2>     
            <asp:ListBox ID="ListBox1" runat="server" SelectionMode="Single" 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" />
    <td><input type="button" value="Up" onclick="Move_Items('up')" /></td>
    <td><input type="button" value="Down" onclick="Move_Items('down')" /></td>

    <asp:Button ID="Button1" runat="server" Text="Button" 
        OnClientClick="selectall();" onclick="Button1_Click"/>

    <br />
<hr />

<asp:Label ID="Label1" runat="server" Text="ListBox Items Priority Order:<br/>"></asp:Label>

Javascript code to Move Up and Down ListItem of a ListBox:

    function Move_Items(direction) {

    var listbox = document.getElementById('<%= ListBox1.ClientID %>');
    var selIndex = listbox.selectedIndex;

    if (selIndex == -1) {
        alert("Please select an option to move.");
    var increment = -1;
    if(direction == 'up')
        increment = -1;
        increment = 1;
    if((selIndex + increment) < 0 ||
        (selIndex + increment) > (listbox.options.length-1)) {
    var selValue = listbox.options[selIndex].value;
    var selText = listbox.options[selIndex].text;
    listbox.options[selIndex].value = listbox.options[selIndex + increment].value
    listbox.options[selIndex].text = listbox.options[selIndex + increment].text
    listbox.options[selIndex + increment].value = selValue;
    listbox.options[selIndex + increment].text = selText;
    listbox.selectedIndex = selIndex + increment;

At this stage we are able to move items Up and Down using the Javascript code. But the problem is, if you need to work on moved items in postback or from server side then you will get blank values. 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 a ListBox by using Request.Form[ListBox1.UniqueID]. So what we need to do? We need to auto select all items of the ListBox Control first. After that from server side we need to rebind again.

Javascript code to Auto Select all Items:

function selectall() {
    document.getElementById('<%= ListBox1.ClientID %>').multiple = true;
    for (i = 0; i < document.getElementById("<%=ListBox1.ClientID %>").options.length; i++)
        document.getElementById("<%=ListBox1.ClientID %>").options[i].selected = true;

Now Get all Items after Postback and Rebind to the ListBox:
C# Code:

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

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

        ListBox1.SelectionMode = ListSelectionMode.Single;

    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 Button1_Click(sender As Object, e As EventArgs)
        Dim leftAllItems As String = Request.Form(ListBox1.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

        Label1.Text = "ListBox Items Priority Order:<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

        ListBox1.SelectionMode = ListSelectionMode.[Single]
    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. Why we need to set selection mode to “Single”? Because while selecting all ListItems in the Javascript method we have changed the selection mode property to “Multiple”.

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

Download Code Example C#        Download Code Example VB.Net

Leave a Reply

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

AlphaOmega Captcha Classica  –  Enter Security Code