Tuesday, March 4, 2008

Move Item Between ListBox


Program To Move Item Between ListBox (Select/Deselect All, Move Single Item, MultiSelect)


// JScript File(JSList.js)

var srclb,destlb;
var Flag ;
function moveAll(evt)
{

if(evt.id == 'btnSel' || evt.id == 'btnADitem')
{
srclb = document.getElementById('lboxSource');
destlb =document.getElementById('lboxdest');
}
else if(evt.id == 'btnDesel' || evt.id == 'btnRMitem')
{
srclb = document.getElementById('lboxdest');
destlb =document.getElementById('lboxSource');
}
if(srclb != null && destlb != null)
{
Flag = true;
while(Flag)
{
Flag = false;
for(var i=0;i<srclb.length;i++)
{
if(evt.id == 'btnADitem' || evt.id == 'btnRMitem')
{
if(srclb[i].selected)
{
exChange(i);
}
}
else if(evt.id == 'btnSel' || evt.id == 'btnDesel')
{
exChange(i);
}
}
}
}
}

function exChange(iVal)
{
destlb.appendChild(srclb[iVal].cloneNode(true));
srclb.removeChild(srclb[iVal]);
Flag = true;
}

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

<!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>ListBox</title>

<script type="text/javascript" language="javascript" src="JavaScript/JSList.js"></script>

</head>
<body>
<form id="form1" runat="server">
<div>
<table>
<tr>
<td>
<asp:ListBox ID="lboxSource" SelectionMode="Multiple"
runat="server" Height="122px" Width="45px">
<asp:ListItem>A</asp:ListItem>
<asp:ListItem>B</asp:ListItem>
<asp:ListItem>C</asp:ListItem>
<asp:ListItem>D</asp:ListItem>
<asp:ListItem>E</asp:ListItem>
<asp:ListItem>F</asp:ListItem>
</asp:ListBox>
</td>
<td style="width: 31px">

<input id="btnDesel" title="DeselectAll" type="button"
style=" position:relative; left: 3px; width: 27px; top: 88px; height: 27px;"
onclick="moveAll(this);" value="««" />

<input id="btnRMitem" title="Remove Item" type="button"
style=" position:relative; left: 3px; width: 27px; top: 35px; height: 25px;"
onclick="moveAll(this);" value="«" />

<input id="btnADitem" title="Add Item" type="button"
style=" position:relative; left: 3px; width: 26px; top: -23px; height: 29px;"
onclick="moveAll(this);" value="»" />

<input id="btnSel" title="SelectAll" type="button"
style=" position:relative; left: 3px; width: 25px; top: -83px; height: 28px;"
onclick="moveAll(this);" value="»»" />

</td>
<td>
<asp:ListBox ID="lboxDest" SelectionMode="Multiple"
runat="server" Height="122px" Width="45px"></asp:ListBox>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>

1 comment:

Cannon The Catalyst said...

This is an awesome post and exactly what I need on the front end. However, on the backend when I go to grab values from the destination listbox, it tells me that there are no items in it.