Monthly Archives: March 2013

Moving Items from one ListBox to another ListBox using Jquery

Jquery can do this real quick and with good user experience. You might need to style it up a bit.

UI code:


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test.aspx.cs" Inherits="Test" %>

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">
 <head runat="server">
  <title></title>
  <script src="Scripts/jquery-1.7.1.js"></script>

 <script>

 $(document).ready(function () {

 var productLineId = $("#ddlProductLine").val();
  var lBox = $('select[id$=lbCountriesAll]');
  var lBox2 = $('select[id$=lbSelectedCountries]');

 $("#btnSelect").click(function (e) {

 var selectedValues = $('#lbCountriesAll option:selected');
  if(selectedValues.length == 0)
  {
  alert('Please select a country.');
  e.preventDefault();
  }

 if (selectedValues.length > 3) {
  alert('You cannot select more than 3 countries.');
  e.preventDefault();
  }
  else {
  //debugger;
  var children = $('#lbSelectedCountries').children();
  if (children.length >= 3) {
  alert('You cannot select more than 3 countries.');
  e.preventDefault();
  }
  else {
  $('#lbSelectedCountries').append($(selectedValues).clone());
  $(selectedValues).remove();
  e.preventDefault();
  }

 }
  })

 $("#btnUnSelect").click(function (e) {
  //debugger;

 var selectedValues = $('#lbSelectedCountries option:selected');
  if (selectedValues.length == 0) {
  alert('Please select a country.');
  e.preventDefault();
  }

 $('#lbCountriesAll').append($(selectedValues).clone());
  $(selectedValues).remove();
  e.preventDefault();

 })

  });
  </script>

 </head>

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

 <table>

 <tr><td>

 <asp:ListBox ID="lbCountriesAll" runat="server" Width="200px" Height="350px" SelectionMode="Multiple" ></asp:ListBox></td>

  <td>
  <asp:Button ID="btnSelect" runat="server" Text=">>"></asp:Button><br />
  <asp:Button ID="btnUnSelect" runat="server" Text="<<"></asp:Button>
  </td>
  <td>
  <asp:ListBox ID="lbSelectedCountries" runat="server" Width="200px" Height="350px" SelectionMode="Multiple"></asp:ListBox></td>
  </tr>

 </table>

 </div>
  </form>
 </body>
 </html>

The above code will transfer the items from one Listbox to another and can also limit the number of items a user can transfer. You can remove that code if you do not need it.

Code Behind:The code below only binds the Listbox with some countries.


protected void Page_Load(object sender, EventArgs e)
 {
 if (!IsPostBack)
 {
 lbCountriesAll.DataSource = GetCountries();
 lbCountriesAll.DataTextField = "Name";
 lbCountriesAll.DataValueField = "ID";
 lbCountriesAll.DataBind();
 }

}

&nbsp;

public static List<Country> GetCountries()
 {
 List<Country> Countries = new List<Country>()
 {
 new Country() { ID=4, Name="Afghanistan"},
 new Country() { ID=918, Name="Åland Islands"},
 new Country() { ID=8, Name="Albania"},
 new Country() { ID=12, Name="Algeria"},
 new Country() { ID=16, Name="American Samoa"},
 new Country() { ID=20, Name="Andorra"},
 new Country() { ID=24, Name="Angola"},
 new Country() { ID=660, Name="Anguilla"},
 new Country() { ID=10, Name="Antarctica"},
 new Country() { ID=28, Name="Antigua and Barbuda"},
 new Country() { ID=32, Name="Argentina"},
 new Country() { ID=51, Name="Armenia"},
 new Country() { ID=533, Name="Aruba"},
 new Country() { ID=36, Name="Australia"},
 new Country() { ID=40, Name="Austria"},
 new Country() { ID=31, Name="Azerbaijan"},
 new Country() { ID=44, Name="Bahamas, The"},
 new Country() { ID=48, Name="Bahrain"},
 new Country() { ID=50, Name="Bangladesh"},
 new Country() { ID=52, Name="Barbados"},
 new Country() { ID=112, Name="Belarus"},
 new Country() { ID=56, Name="Belgium"},
 new Country() { ID=84, Name="Belize"},
 new Country() { ID=204, Name="Benin"},
 new Country() { ID=60, Name="Bermuda"},
 new Country() { ID=64, Name="Bhutan"},
 new Country() { ID=68, Name="Bolivia"},
 new Country() { ID=912, Name="Bonaire, Sint Eustatius and Saba"},
 new Country() { ID=70, Name="Bosnia and Herzegovina"},
 new Country() { ID=72, Name="Botswana"},
 new Country() { ID=74, Name="Bouvet Island"},
 new Country() { ID=76, Name="Brazil"},
 new Country() { ID=86, Name="British Indian Ocean Territory"},
 new Country() { ID=96, Name="Brunei"},
 new Country() { ID=100, Name="Bulgaria"},
 new Country() { ID=854, Name="Burkina Faso"},
 new Country() { ID=108, Name="Burundi"}

};

return Countries;

}

I am using a web application to demonstrate here. You can use the same code in MVC too, only thing you need to change is the URL you are pointing to in $.ajax call. It would point to an action method from a controller class.
Similarly, you can use the same code with HTML 5 app, only the Url will point to some Http service.

I hope it helps!

 

Advertisements