ASPX Html
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="MoveItemsFromOneListBoxToAnother.aspx.cs" Inherits="MoveItemsFromOneListBoxToAnother" EnableEventValidation="false" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style>
body{font-size:13px; font-family:Verdana;}
</style>
<script language="javascript" type="text/javascript" src="JS/JQuery.js"></script>
<script language="javascript" type="text/javascript">
//On Ready
$(document).ready(function() {
//Selects the option on the postback event
SetTheDefaultSelected();
//Double click settings for the LIST items
$("select[name*='lstNonSelected']").dblclick(function() {
MoveToSelection();
});
$("select[name*='lstSelected']").dblclick(function() {
MoveFromSelection();
});
});
//Move to Selection box
function MoveToSelection() {
MoveTheOptions($("select[name*='lstNonSelected']").attr("id"), $("select[name*='lstSelected']").attr("id"));
}
//Move from Selection box
function MoveFromSelection() {
MoveTheOptions($("select[name*='lstSelected']").attr("id"), $("select[name*='lstNonSelected']").attr("id"));
}
//Swap the values
function MoveTheOptions(listBox1, listBox2) {
//Check if the list box is having any options selected
if ($("#" + listBox1 + " option:selected").val() == null) {
alert("Please select an option.");
return;
}
//Get iteself to an array
var arr = $("#" + listBox1 + " option:selected").map(function() { return "<option value='" + $(this).val() + "'>" + $(this).text() + "</option>"; });
//Insert a new option(s)
$("#" + listBox2 + "").append($.makeArray(arr).join(""));
//Remove the first list box
$("#" + listBox1 + " option:selected").remove();
//Refills the paycodes
RefillHiddenTextBox();
}
//Refills the txt pay codes
function RefillHiddenTextBox() {
//Refill the screen
var txt = $("select[name*='lstSelected'] option").map(function() { return this.value }).get().join(",");
//Sets the values to the textbox
$("input[name*='txtSelected']").val(txt);
}
//Set The Default Selected
function SetTheDefaultSelected() {
//Select Pay Codes
if ($("input[name*='txtSelected']").val() != "") {
//On the basis of value select the options
var txt = $("input[name*='txtSelected']").val().split(',');
//On the basis of value select the options
for (var i = 0; i < txt.length; i = i + 1) {
//Get the values
var val = $("select[name*='lstNonSelected'] option:[value='" + txt[i] + "']").val();
var text = $("select[name*='lstNonSelected'] option:[value='" + txt[i] + "']").text();
//Insert a new option
$("select[name*='lstSelected']").append("<option value='" + val + "'>" + text + "</option>");
//Remove the first list box
$("select[name*='lstNonSelected'] option:[value='" + txt[i] + "']").remove();
}
}
}
//Moves the options up or down using the buttons on the right hand side of the Selected List
function MoveUpOrDown(isUp)
{
var listbox = $("select[name*='lstSelected']");
if ($(listbox).find("option:selected").length == 0) {
alert("You need to select atleast one selection.");
}
else if ($(listbox).find("option:selected").length > 1) {
alert("You can only select one option to move Up or Down.");
}
else {
//Get the values
var val = $(listbox).find("option:selected").val();
var text = $(listbox).find("option:selected").text();
var index = $(listbox).find("option:selected").index();
//Get the length now
var length = $(listbox).find("option").length;
//Move it up or down
if (isUp == true) {
//Move the option a row above
index = (index == 0 ? index : index - 1);
//Insert the options
$("<option value='" + val + "'>" + text + "</option>").insertBefore($(listbox).find("option:eq(" + index + ")"));
}
else // Down
{
//Move the option a row down
index = (index == length - 1 ? index : index + 1);
$("<option value='" + val + "'>" + text + "</option>").insertAfter($(listbox).find("option:eq(" + index + ")"));
}
//Remove the options
$(listbox).find("option:selected").remove();
//Set the value as selected
$(listbox).val(val);
//Refill the textbox
RefillHiddenTextBox();
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<h1>Moving and Re-Ordering List Items within listboxes</h1>
<table cellspacing="5">
<tr>
<td colspan="4" align="center" style="color:Red"><asp:Literal ID="ltrlViewOption" runat="server" /></td>
</tr>
<tr>
<td><i><b>Non Selected Items</b></i></td>
<td> </td>
<td><i><b>Selected Items</b></i></td>
<td> </td>
</tr>
<tr>
<td><asp:ListBox ID="lstNonSelected" runat="server" Rows="10" CssClass="form" Width="250px" SelectionMode="Multiple" /></td>
<td>
<input type="button" class="button" value=">" onclick="MoveToSelection();" /><br /><br /><input type="button" class="button" value="<" onclick="MoveFromSelection();" />
</td>
<td><asp:ListBox ID="lstSelected" runat="server" Rows="10" CssClass="form" Width="250px" SelectionMode="Multiple" /></td>
<td>
<input type="button" class="button" value="Up" onclick="MoveUpOrDown(true) ;" style="width:50px" /><br /><br /><input type="button" class="button" value="Down" onclick="MoveUpOrDown(false) ;" style="width:50px" />
</td>
</tr>
<tr>
<td colspan="4" align="center"><asp:TextBox ID="txtSelected" runat="server" /><asp:Button ID="btnView" runat="server" Text="View Selected Options On Server Side" /></td>
</tr>
</table>
</form>
</body>
</html>
C# Code behind
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class MoveItemsFromOneListBoxToAnother : System.Web.UI.Page
{
//The list of data to be bound to the list
private IList<BindListClass> BindList
{
get
{
IList<BindListClass> obj = new List<BindListClass>();
obj.Add(new BindListClass() { Id = 1, Name = "James Bond" });
obj.Add(new BindListClass() { Id = 2, Name = "Bruce Wayne" });
obj.Add(new BindListClass() { Id = 3, Name = "Peter Parker" });
obj.Add(new BindListClass() { Id = 4, Name = "Tonk Stark" });
obj.Add(new BindListClass() { Id = 5, Name = "Ethen Hunt" });
return obj;
}
}
protected void Page_Load(object sender, EventArgs e)
{
//Hide the selected option
txtSelected.Style.Add("display", "none");
if (!IsPostBack)
{
//Bind the non selected list
lstNonSelected.DataSource = BindList;
lstNonSelected.DataTextField = "Name";
lstNonSelected.DataValueField = "ID";
lstNonSelected.DataBind();
}
else
{
//Show the selected values on the postback of the screen
ltrlViewOption.Text = "\""+ txtSelected.Text +"\" are the selected options after postback.";
}
}
}
public class BindListClass
{
public int Id { get; set; }
public string Name { get; set; }
}
Snapshot of Screen
Important Features
- Can move the items from one listbox to another using buttons with text "<"
and ">".
- On double clicking will work on the listitems.
- "Up" and "Down" buttons on the right of the Selected list will reorder the liteitems.
- "View Selected Options On Server Side" will show the items selected on the server side.
Can you please give us a demo code or source code for this only sir, if possible please.
ReplyDeleteThanks a lot for your script.its works for me.
ReplyDelete