CODEDIGEST
Home Articles CodeDigest Tutorials FAQs
Home > CodeDigest >  
Technologies
 


Move List Items Up and Down Using jQuery in ASP.Net ListBox control
Submitted By Satheesh Babu B
On 12/17/2009 6:45:55 AM
Tags: ASP.Net,CodeDigest,jQuery  

Move List Items Up and Down Using jQuery in ASP.Net ListBox control

 

Sometimes, we require moving/scrolling the list items in the ListBox control up and down to sort manually. This little code snippet will help us to do that using jQuery library.

 

Download the latest jQuery library from jQuery.com and integrate into your project. Read the following Faq's to integrate jQuery library to your project.

What is jQuery? How to use it in ASP.Net Pages?

How to enable jQuery intellisense in Visual Studio 2008?

How to use jQuery intellisense in an external javascript file?

 

The below jQuery code will help you to do the same,

 

 

<script src="scripts/jquery-1[1].3.2.js" type="text/javascript"></script>

     <script type="text/javascript">

         function MoveDown() {

             var selectedOption = $('#ListBox1 > option[selected]');

             var nextOption = $('#ListBox1 > option[selected]').next("option");           

             if ($(nextOption).text() != "") {             

                 $(selectedOption).remove();

                 $(nextOption).after($(selectedOption));

             }                

         }

         function MoveUp() {

             var selectedOption = $('#ListBox1 > option[selected]');

             var prevOption = $('#ListBox1 > option[selected]').prev("option");            

             if ($(prevOption).text() != "") {

                 $(selectedOption).remove();

                 $(prevOption).before($(selectedOption));

             }

           }

 

    </script> 

 

<form id="form1" runat="server">

    <div>

    <table>

  <tr>

    <td rowspan=2>     

      <asp:ListBox ID="ListBox1" runat="server" Rows="10">

          <asp:ListItem>1</asp:ListItem>

          <asp:ListItem>2</asp:ListItem>

          <asp:ListItem>3</asp:ListItem>

          <asp:ListItem>4</asp:ListItem>

          <asp:ListItem>5</asp:ListItem>

          <asp:ListItem>6</asp:ListItem>

        </asp:ListBox>

    </td>

    <td><input type="button" value="Up" onclick="MoveUp()"></td>

  </tr>

  <tr>

    <td><input type="button" value="Down" onclick="MoveDown()"></td>

  </tr>

</table>

    </div>

    </form>

 

You need to access the ListBox using <%=ListBox1.ClientID%> in jQuery if in case your ListBox control is in a page that has MasterPage.

Execute the page and see it in action! Select an item, and click Up and Down button to move the selected item up and down.

Happy Coding!!

Recent Codes
  • View All Codes..