Pages

Search

Wednesday, October 22, 2008

How to shift Items between List Boxes?

Output:-




In aspx Page :-
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ShiftingListBoxes.aspx.cs" Inherits="ShiftingListBoxes" %>

<!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>Untitled Page</title>
<script type="text/javascript" language="javascript">



function fnMoveItems(lstbxFrom,lstbxTo)
{
var varFromBox = document.all(lstbxFrom);
var varToBox = document.all(lstbxTo);
if ((varFromBox != null) && (varToBox != null))
{
if(varFromBox.length < 1)
{
alert('There are no items in the source ListBox');
return false;
}
if(varFromBox.options.selectedIndex == -1) // when no Item is selected the index will be -1
{
alert('Please select an Item to move');
return false;
}
while ( varFromBox.options.selectedIndex >= 0 )
{
var newOption = new Option(); // Create a new instance of ListItem
newOption.text = varFromBox.options[varFromBox.options.selectedIndex].text;
newOption.value = varFromBox.options[varFromBox.options.selectedIndex].value;
varToBox.options[varToBox.length] = newOption; //Append the item in Target Listbox
varFromBox.remove(varFromBox.options.selectedIndex); //Remove the item from Source Listbox
}
}
ShowCounts();
return false;
}

function DoesItemExist(opt,lst)
{
for(var i=lst.options.length-1;i>=0;i--)
{
if(lst.options[i].value==opt.value && lst.options[i].text==opt.text )
{
return true;
}
}
return false;
}
function fnMoveAllItems(lstbxFrom,lstbxTo)
{

var varFromBox = document.all(lstbxFrom);
var varToBox = document.all(lstbxTo);

for(var i=varFromBox.options.length-1;i>=0;i--)
{
var opt=document.createElement('option');
opt.text=varFromBox.options[i].text;
opt.value=varFromBox.options[i].value;
if(DoesItemExist(opt,varToBox)==false)
varToBox.options.add(opt,i);
varFromBox.options.remove(i);
}
ShowCounts();
return false;
}

function ShowCounts()
{

var varlistRight = document.getElementById('listRight');
var varlistLeft = document.getElementById('listLeft');
var llcnt=GetCount(varlistLeft);
var lrcnt=GetCount(varlistRight);
document.getElementById('lbllistLeft').innerText="Count : "+llcnt+"/"+varlistLeft.options.length;
document.getElementById('lbllistRight').innerText="Count : "+lrcnt+"/"+varlistRight.options.length;
}

function GetCount(lst)
{
var cnt=0;
for(var i=lst.options.length-1;i>=0;i--)
{
if(lst.options[i].selected)
cnt++;
}
return cnt;
}
function lstChnge(obj,lbl)
{
var llcnt=GetCount(obj);
document.getElementById(lbl).innerText="Count : "+llcnt+"/"+obj.options.length;
}
</script>
</head>
<body onload="ShowCounts();">
<form id="form1" runat="server">
<table width="50%">
<tr>
<td align="center">
<asp:ListBox ID="listLeft" runat="server" Height="109px" Width="103px" SelectionMode="Multiple" onchange="lstChnge(this,'lbllistLeft');">
<asp:ListItem Value="0">Ashish</asp:ListItem>
<asp:ListItem Value="1">Badrinath</asp:ListItem>
<asp:ListItem Value="2">Chaminda</asp:ListItem>
<asp:ListItem Value="3">Dravid</asp:ListItem>
<asp:ListItem Value="4">Goutham</asp:ListItem>
<asp:ListItem Value="5">Irfan</asp:ListItem>
<asp:ListItem Value="6">Lakshman</asp:ListItem>
<asp:ListItem Value="7">Nehra</asp:ListItem>
<asp:ListItem Value="8">Sehwag</asp:ListItem>
<asp:ListItem Value="9">Tendulkar</asp:ListItem>
<asp:ListItem Value="10">Yuvraj</asp:ListItem>
</asp:ListBox>
<label id="lbllistLeft" ></label>
</td>

<td>
<table width="100%">
<tr align="center">
<td align="center"><asp:Button ID="btnAddRight" runat="server" Text=">" Width="22px" /></td></tr>
<tr align="center"><td align="center"><asp:Button ID="btnAddRightAll" runat="server" Text=">>" /></td></tr>
<tr align="center"><td align="center"> <asp:Button ID="btnAddLeft" runat="server" Text="<" Width="23px" /></td></tr>
<tr align="center"><td align="center"><asp:Button ID="btnAddLeftAll" runat="server" Text="<<" Width="24px" /></td></tr>
</table>
</td>



<td align="center">
<asp:ListBox ID="listRight" runat="server" Height="110px" Width="102px" SelectionMode="Multiple" onchange="lstChnge(this,'lbllistRight');"></asp:ListBox>

<label id="lbllistRight" ></label>
</td>
</tr>
</table>


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

In Code Behind Page:-

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class ShiftingListBoxes : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
btnAddRight.Attributes.Add("onclick", "return fnMoveItems('listLeft','listRight')");
btnAddLeft.Attributes.Add("onclick", "return fnMoveItems('listRight','listLeft')");
btnAddRightAll.Attributes.Add("onclick", "return fnMoveAllItems('listLeft','listRight')");
btnAddLeftAll.Attributes.Add("onclick", "return fnMoveAllItems('listRight','listLeft')");

}

}
}

No comments:

Post a Comment