JQUERY TO MOVE ITEMS FROM ONE LISTBOX TO ANOTHER IN ASP.NET C#
Introduction: In this article I will show with an example to move single or multiple selected items between two listbox controls using jQuery in Asp.Net with C# and VB.
Description: While working on Asp.Net project I got the requirement to move items from one listbox to other as shown in demo image above This can be easily done server side and client side. Here in this example I have used jQuery to make it work client side.
I have demonstrated how easily we can move items from first listbox to second listbox and vice versa by using four button controls. First button for moving selected item from first to second listbox, second button for moving all items whether selected or not to second listbox, third button for moving selected items back to first listbox and fourth one is for moving all items back to first listbox.
Implementation: Let’s create a web page for demonstration purpose
HTML source:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="https://ajax.googleapis.com/…/l…/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#btnMoveRight").on("click", function () {
var selectedOptions = $('#lbTeamA > option:selected');
if (selectedOptions.length == 0) {
alert("Select at least one item to move");
return false;
}
$('#lbTeamA > option:selected').appendTo('#lbTeamB');
e.preventDefault();
});
$("#btnMoveAllRight").on("click", function () {
$('#lbTeamA > option').appendTo('#lbTeamB');
e.preventDefault();
});
$("#btnMoveLeft").on("click", function () {
var selectedOptions = $('#lbTeamB > option:selected');
if (selectedOptions.length == 0) {
alert("Select at least one item to move");
return false;
}
$('#lbTeamB > option:selected').appendTo('#lbTeamA');
e.preventDefault();
});
$("#btnMoveAllLeft").on("click", function () {
$('#lbTeamB > option').appendTo('#lbTeamA');
e.preventDefault();
});
});
function selectAll() {
$("#lbTeamA option").attr("selected", "selected");
$("#lbTeamB option").attr("selected", "selected");
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<fieldset style="width:400px;">
<legend>Move Items from one ListBox to other using jQuery</legend>
<table style="width: 400px">
<tr>
<td style="width: 40%">Team A</td>
<td style="width: 20%"></td>
<td style="width: 40%">Team B</td>
</tr>
<tr>
<td style="vertical-align: top; width: 40%">
<asp:ListBox ID="lbTeamA" runat="server" SelectionMode="Multiple" Style="width: 100%">
<asp:ListItem Text="Jatin"></asp:ListItem>
<asp:ListItem Text="Ranveer"></asp:ListItem>
<asp:ListItem Text="Sohail"></asp:ListItem>
<asp:ListItem Text="Arjun"></asp:ListItem>
</asp:ListBox>
</td>
<td style="text-align: center; width: 20%">
<input type="button" id="btnMoveRight" value=">" style="width: 50px;" /><br />
<input type="button" id="btnMoveAllRight" value=">>" style="width: 50px;" /><br />
<input type="button" id="btnMoveLeft" value="<" style="width: 50px;" /><br />
<input type="button" id="btnMoveAllLeft" value="<<" style="width: 50px;" /><br />
<br />
<asp:Button ID="btnSubmit" runat="server" ClientIDMode="Static" OnClientClick="selectAll();"
OnClick="btnSubmit_Click" Text="Submit" />
</td>
<td style="vertical-align: top; width: 40%">
<asp:ListBox ID="lbTeamB" runat="server" SelectionMode="Multiple" Style="width: 100%"></asp:ListBox>
</td>
</tr>
<tr>
<td colspan="3">
<br />
<asp:Literal ID="ltrlTeamA" runat="server"></asp:Literal>
<br />
<asp:Literal ID="ltrlTeamB" runat="server"></asp:Literal></td>
</tr>
</table>
</fieldset>
</div>
</form>
</body>
</html>
Asp.Net C# Code:
protected void btnSubmit_Click(object sender, EventArgs e)
{
string teamASelectedMembers = Request.Form[lbTeamA.UniqueID];
lbTeamA.Items.Clear();
if (!string.IsNullOrEmpty(teamASelectedMembers))
{
foreach (string item in teamASelectedMembers.Split(','))
{
lbTeamA.Items.Add(item);
}
}
string teamBSelectedMembers = Request.Form[lbTeamB.UniqueID];
lbTeamB.Items.Clear();
if (!string.IsNullOrEmpty(teamBSelectedMembers))
{
foreach (string item in teamBSelectedMembers.Split(','))
{
lbTeamB.Items.Add(item);
}
}
ltrlTeamA.Text = "Team A members:" + teamASelectedMembers;
ltrlTeamB.Text = "Team B members:" + teamBSelectedMembers;
}
Description: While working on Asp.Net project I got the requirement to move items from one listbox to other as shown in demo image above This can be easily done server side and client side. Here in this example I have used jQuery to make it work client side.
I have demonstrated how easily we can move items from first listbox to second listbox and vice versa by using four button controls. First button for moving selected item from first to second listbox, second button for moving all items whether selected or not to second listbox, third button for moving selected items back to first listbox and fourth one is for moving all items back to first listbox.
Implementation: Let’s create a web page for demonstration purpose
HTML source:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="https://ajax.googleapis.com/…/l…/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#btnMoveRight").on("click", function () {
var selectedOptions = $('#lbTeamA > option:selected');
if (selectedOptions.length == 0) {
alert("Select at least one item to move");
return false;
}
$('#lbTeamA > option:selected').appendTo('#lbTeamB');
e.preventDefault();
});
$("#btnMoveAllRight").on("click", function () {
$('#lbTeamA > option').appendTo('#lbTeamB');
e.preventDefault();
});
$("#btnMoveLeft").on("click", function () {
var selectedOptions = $('#lbTeamB > option:selected');
if (selectedOptions.length == 0) {
alert("Select at least one item to move");
return false;
}
$('#lbTeamB > option:selected').appendTo('#lbTeamA');
e.preventDefault();
});
$("#btnMoveAllLeft").on("click", function () {
$('#lbTeamB > option').appendTo('#lbTeamA');
e.preventDefault();
});
});
function selectAll() {
$("#lbTeamA option").attr("selected", "selected");
$("#lbTeamB option").attr("selected", "selected");
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<fieldset style="width:400px;">
<legend>Move Items from one ListBox to other using jQuery</legend>
<table style="width: 400px">
<tr>
<td style="width: 40%">Team A</td>
<td style="width: 20%"></td>
<td style="width: 40%">Team B</td>
</tr>
<tr>
<td style="vertical-align: top; width: 40%">
<asp:ListBox ID="lbTeamA" runat="server" SelectionMode="Multiple" Style="width: 100%">
<asp:ListItem Text="Jatin"></asp:ListItem>
<asp:ListItem Text="Ranveer"></asp:ListItem>
<asp:ListItem Text="Sohail"></asp:ListItem>
<asp:ListItem Text="Arjun"></asp:ListItem>
</asp:ListBox>
</td>
<td style="text-align: center; width: 20%">
<input type="button" id="btnMoveRight" value=">" style="width: 50px;" /><br />
<input type="button" id="btnMoveAllRight" value=">>" style="width: 50px;" /><br />
<input type="button" id="btnMoveLeft" value="<" style="width: 50px;" /><br />
<input type="button" id="btnMoveAllLeft" value="<<" style="width: 50px;" /><br />
<br />
<asp:Button ID="btnSubmit" runat="server" ClientIDMode="Static" OnClientClick="selectAll();"
OnClick="btnSubmit_Click" Text="Submit" />
</td>
<td style="vertical-align: top; width: 40%">
<asp:ListBox ID="lbTeamB" runat="server" SelectionMode="Multiple" Style="width: 100%"></asp:ListBox>
</td>
</tr>
<tr>
<td colspan="3">
<br />
<asp:Literal ID="ltrlTeamA" runat="server"></asp:Literal>
<br />
<asp:Literal ID="ltrlTeamB" runat="server"></asp:Literal></td>
</tr>
</table>
</fieldset>
</div>
</form>
</body>
</html>
Asp.Net C# Code:
protected void btnSubmit_Click(object sender, EventArgs e)
{
string teamASelectedMembers = Request.Form[lbTeamA.UniqueID];
lbTeamA.Items.Clear();
if (!string.IsNullOrEmpty(teamASelectedMembers))
{
foreach (string item in teamASelectedMembers.Split(','))
{
lbTeamA.Items.Add(item);
}
}
string teamBSelectedMembers = Request.Form[lbTeamB.UniqueID];
lbTeamB.Items.Clear();
if (!string.IsNullOrEmpty(teamBSelectedMembers))
{
foreach (string item in teamBSelectedMembers.Split(','))
{
lbTeamB.Items.Add(item);
}
}
ltrlTeamA.Text = "Team A members:" + teamASelectedMembers;
ltrlTeamB.Text = "Team B members:" + teamBSelectedMembers;
}
No comments