ASP.NET - how to swap value between two listbox

Asked By msakt on 04-Jun-12 05:36 AM
how to swap value between two listbox
dotnet freak replied to msakt on 04-Jun-12 05:38 AM

Try this...

http://geekswithblogs.net/dotNETvinz/archive/2009/02/24/moving-listitems-between-two-listbox--server-side-approach.aspx

dotnet freak replied to msakt on 04-Jun-12 05:40 AM
Try JQuery for this:


 <table>
        <tr>
            <td>
                <asp:ListBox ID="fromListBox" runat="server" SelectionMode="Multiple" Rows="8" AutoPostBack="false" 
                    DataSourceID="SqlDataSource1" DataTextField="FullName" DataValueField="UserId" CssClass="teamListBox">
                </asp:ListBox>


            </td>


            <td> 
                <input id="btnAdd" type="button" value="Add >" /><br/>
                <br/>
                <input id="btnRemove" type="button" value="< Remove" /><br/>
                <br/>
            </td>


            <td>
                <asp:ListBox ID="toListBox" runat="server" SelectionMode="Multiple" Rows="8" AutoPostBack="false"
                    CssClass="teamListBox" DataSourceID="SqlDataSource2" DataTextField="FullName" 
                    DataValueField="UserId" >
                </asp:ListBox>  
            </td>
        </tr>
    </table>


JQuery Script:


$(document).ready(function () {


        $("#btnAdd").click(function () {
            $("#fromListBox option:selected").appendTo("#toListBox");
        });


        $("#btnRemove").click(function () {
            $("#toListBox option:selected").appendTo("#fromListBox");
        });


    });

Jitendra Faye replied to msakt on 04-Jun-12 05:40 AM


Use this javascript code-

<script type="text/javascript">
function moveToRightOrLeft(side){
var listLeft=document.getElementById('selectLeft');
var listRight=document.getElementById('selectRight');

if(side==1){
if(listLeft.options.length==0){
alert('You have already moved all countries to Right');
return false;
}else{
var selectedCountry=listLeft.options.selectedIndex;

move(listRight,listLeft.options[selectedCountry].value,listLeft.options[selectedCountry].text);
listLeft.remove(selectedCountry);

if(listLeft.options.length>0){
listLeft.options[0].selected=true;
}
}
}else if(side==2){
if(listRight.options.length==0){
alert('You have already moved all countries to Left');
return false;
}else{
var selectedCountry=listRight.options.selectedIndex;

move(listLeft,listRight.options[selectedCountry].value,listRight.options[selectedCountry].text);
listRight.remove(selectedCountry);

if(listRight.options.length>0){
listRight.options[0].selected=true;
}
}
}
}

function move(listBoxTo,optionValue,optionDisplayText){
var newOption = document.createElement("option");
newOption.value = optionValue;
newOption.text = optionDisplayText;
listBoxTo.add(newOption, null);
return true;
}
</script>


Follow this link for comaplete code-

http://kottawadumi.blogspot.in/2011/07/add-or-remove-list-box-items.html


hope this will help you.
Ravi Maurya replied to msakt on 04-Jun-12 05:49 AM
hi,

refer this article 

http://viralpatel.net/blogs/2009/06/listbox-select-all-move-left-right-up-down-javascript.html
Chintan Vaghela replied to msakt on 04-Jun-12 05:52 AM

Hi Frndz,

Create two listbox and two Button for swap first list box to second listbox and viceversa

 

<asp:ListBox ID="lstFirst" SelectionMode="Multiple" runat="server">

      <asp:ListItem Text="first" Value="first"></asp:ListItem>

      <asp:ListItem Text="second" Value="second"></asp:ListItem>

      <asp:ListItem Text="third" Value="third"></asp:ListItem>

    </asp:ListBox>

    <asp:ListBox ID="lstSecond" SelectionMode="Multiple" runat="server"></asp:ListBox>

    <asp:Button ID="btnSwap1" runat="server"  OnClick="BtnSWAPFirst_Click"  Text="SWAP1" />

 

    <asp:Button ID="btnSwap2" runat="server"  OnClick="BtnSWAPSecond_Click"  Text="SWAP2" />

 

C# Page Button click event Logic for swap one listbox selected item to second listbox

 

protected void BtnSWAPFirst_Click(object sender, EventArgs e)

    {

      foreach (ListItem item in lstFirst.Items)

      {

        if (item.Selected)

          lstSecond.Items.Add(item);

      }

      int Count = lstFirst.Items.Count;

      for (int j = 0; j < Count; j++)

      {

        lstFirst.Items.Remove(lstFirst.SelectedItem);

 

      }

    }

 

protected void BtnSWAPSecond_Click(object sender, EventArgs e)

    {

      foreach (ListItem item in lstSecond.Items)

      {

        if (item.Selected)

          lstFirst.Items.Add(item);

      }

      int Count = lstSecond.Items.Count;

      for (int j = 0; j < Count; j++)

      {

        lstSecond.Items.Remove(lstSecond.SelectedItem);

 

      }

    }

 

Hope this helpful!

Thanks

 

 

 

 

DL M replied to msakt on 04-Jun-12 05:55 AM
Hi.

show code sample;

<%@ Page Language="C#" %>
<html>
<head id="Head1" runat="server">
  <script runat="server">
    protected void MoveS(object sender, EventArgs e)
    {
      this.lstSource.ClearSelection();
      if (this.lstDestination.SelectedIndex > -1)
      {
        string s = this.lstDestination.SelectedValue;
        this.lstSource.Items.Add(this.lstDestination.SelectedItem);
        this.lstDestination.Items.Remove(this.lstDestination.SelectedItem);
        this.lstSource.SelectedValue = s;
      }
    }
    protected void MoveD(object sender, EventArgs e)
    {
      this.lstDestination.ClearSelection();
      if (this.lstSource.SelectedIndex > -1)
      {
        string s = this.lstSource.SelectedValue;
        this.lstDestination.Items.Add(this.lstSource.SelectedItem);
        this.lstSource.Items.Remove(this.lstSource.SelectedItem);
        this.lstDestination.SelectedValue = s;
      }
    }
    protected void Edit(object sender, EventArgs e)
    {
      this.hdnSelection.Value = string.Empty;
      this.txtEdit.Text = string.Empty;
      if (this.lstSource.SelectedIndex > -1)
      {
        this.txtEdit.Text = this.lstSource.SelectedValue;
        this.hdnSelection.Value = "S";
        this.lstSource.Items.Remove(this.lstSource.SelectedItem);
      }
      else if (this.lstDestination.SelectedIndex > -1)
      {
        this.txtEdit.Text = this.lstDestination.SelectedValue;
        this.hdnSelection.Value = "D";
        this.lstDestination.Items.Remove(this.lstDestination.SelectedItem);
      }
      if (!string.IsNullOrEmpty(this.txtEdit.Text))
      {
        this.pnlEdit.Visible = true;
        this.pnlItems.Enabled = false;
      }
    }
    protected void Save(object sender, EventArgs e)
    {
      if (this.hdnSelection.Value.Equals("D"))
        this.lstDestination.Items.Add(new ListItem(this.txtEdit.Text));
      else if (this.hdnSelection.Value.Equals("S"))
        this.lstSource.Items.Add(new ListItem(this.txtEdit.Text));
      this.txtEdit.Text = string.Empty;
      this.hdnSelection.Value = string.Empty;
      this.pnlEdit.Visible = false;
      this.pnlItems.Enabled = true;
    }
    protected void ClearDestination(object sender, EventArgs e)
    {
      this.lstDestination.ClearSelection();
    }
    protected void ClearSource(object sender, EventArgs e)
    {
      this.lstSource.ClearSelection();
    }
  </script>
</head>
 
<body>
  <form runat="server" id="form1">
    <asp:ScriptManager runat="server" ID="pageScriptManager" />
    <asp:UpdatePanel runat="server" ID="upnlEdit">
      <ContentTemplate>
        <asp:Panel runat="server" ID="pnlItems">
          <asp:ListBox runat="server" ID="lstSource" 
            OnSelectedIndexChanged="ClearDestination" AutoPostBack="true">
            <asp:ListItem>Car</asp:ListItem>
            <asp:ListItem>Van</asp:ListItem>
            <asp:ListItem>Truck</asp:ListItem>
            <asp:ListItem>Bike</asp:ListItem>
            <asp:ListItem>Cycle</asp:ListItem>
          </asp:ListBox>
          <asp:ListBox runat="server" ID="lstDestination" 
            OnSelectedIndexChanged="ClearSource" AutoPostBack="true" />
        </asp:Panel>
        <hr />
        <asp:Button runat="server" ID="btnMoveD" OnClick="MoveD" Text=">>" />
        <asp:Button runat="server" ID="btnMoveS" OnClick="MoveS" Text="<<" />
        <asp:Button runat="server" ID="btnEdit" Text="Edit" OnClick="Edit" />
        <hr />
        <asp:Panel runat="server" ID="pnlEdit" Visible="false">
          <asp:TextBox runat="server" ID="txtEdit"></asp:TextBox>
          <asp:RequiredFieldValidator runat="server" ID="rvalEdit" 
            ControlToValidate="txtEdit" Display="Dynamic" ErrorMessage="*" ValidationGroup="Edit" />
          <asp:HiddenField runat="server" ID="hdnSelection" />
          <asp:Button runat="server" ID="btnSave" OnClick="Save" Text="Save"  ValidationGroup="Edit" />
        </asp:Panel>
      </ContentTemplate>
    </asp:UpdatePanel>
  </form>
</body>
</html>