Back to discussion

moving values from one listbox to other

Last post was 16 Aug 2007 at 09:50
db , javascript , xhtml Kākināda, India
  • 13 years ago

    hi experts,

    I have a dropdown in my page.whenever I select a value from my dropdown a  usercontrol will appear. 

    In that usercontrol,I have two listboxes and two buttons.I have to move the data( which i will get from the database accordingly whenever i select a value from the dropdownlist)in one listbox  to other listbox whenever i click a button.

    I have to move the data from one listbox to other without any pageload...

    this is my code

    <%

    @ Control Language="C#" AutoEventWireup="true" CodeFile="ListItem.ascx.cs" Inherits="ListItem"%>

    <

    html>

    <

    head>

    <

    script language="javascript" type="text/javascript">

    debugger

    function

     move(fbox, tbox)

    {

    var source=document.getElementById(fbox);

    var target=document.getElementById(tbox);

    if((source!==null)&&(target!=null))

    {

    while(source.options.selectedIndex>=0)

    {

    var newOption=new Option();

    newOption.text=source.options[source.options.selectedIndex].text;

    newOption.value=source.options[source.options.selectedIndex].value;

    target.options[target.length]=newOption;

    source.remove(source.options.selectedInedx);

    }

    }

    }

    </

    script>

    </

    head>

    <

    body>

    <

    form name="myform">

    <

    table border=0>

    <

    tr>

    <

    td style="height: 92px">

    <

    asp:ListBox ID="ListBox1" runat="server" Height="88px" Width="104px" SelectionMode=Multiple>

    </

    asp:ListBox>

    </

    td>

    <

    td style="height: 92px">

    <

    table align=center border=0>

    <

    tr>

    <

    td>

    <

    asp:ImageButton runat=server ID=imggt ImageUrl="~/Images/gt.gif" OnClientClick ="BLOCKED SCRIPTmove('ListBox1','ListBox2');" />

    </

    td>

    </

    tr>

    <

    tr><td></td></tr>

    <

    tr>

    <

    td>

    <

    asp:ImageButton runat=server ID=imglt ImageUrl="~/Images/lt.gif" OnClientClick="BLOCKED SCRIPTmove('ListBox2','ListBox1' );" />

    </

    td>

    </

    tr>

    </

    table>

    </

    td>

    <

    td style="height: 92px">

    <

    asp:ListBox ID="ListBox2" runat="server" Height="88px" Width="104px" SelectionMode=Multiple></asp:ListBox>

    </

    td>

    </

    tr>

    </

    table>

    </

    form>

    </

    body>

    </

    html>

    But i am getting null values in source and target....

    Many thanks for any help and apologies for just dumping code.
     

     

    Report abuse
  • 13 years ago
    Hi Angarika,
     I can understand ur problem...
     Whenever ur are moving from one listbox to another list box in the client side it will show in the listbox but after submit it wont hold the values... In this case u need to maintain the moved values into one hidded textbox (for source listbox...if u need to maintain the target listbox value then u need to maintain onemore hidded textbox) control with comma seperated values. After submit u need to get the values from the hidden textbox control and u need to bind the listbox control w.r.t the listboxes...


    I hope this tips may useful for you...

    Good Luck

    Regards
    Hari K......
    Report abuse
  • 13 years ago

    hi hari ,

    I am new to .net

    so could u please tell me clearly.

    or

    could u please modify my code which i have written above.so that i can understand

    thanks for ur reply.

    Report abuse
  • 13 years ago
    Hi Angarika,
     First u need to add one Hidded textbox control and put the ID of that control as "txtHSource"

    U just change u r existing coding as per i bolded the line






    <%@ Control Language="C#" AutoEventWireup="true" CodeFile="ListItem.ascx.cs" Inherits="ListItem"%>

    <html>

    <head>

    <script language="javascript" type="text/javascript">

    debugger

    function move(fbox, tbox)

    {

        var source=document.getElementById(fbox);

        var target=document.getElementById(tbox);

        if((source!==null)&&(target!=null))

        {

            document.getElementById("txtHSource").value="";

            while(source.options.selectedIndex>=0)

            {

                var newOption=new Option();

                newOption.text=source.options[source.options.selectedIndex].text;

                newOption.value=source.options[source.options.selectedIndex].value;

                target.options[target.length]=newOption;

                source.remove(source.options.selectedInedx);

                document.getElementById("txtHSource").value=source.options[source.options.selectedIndex].value + ",";

            }

        }

    }

    </script>

    </head>

    <body>

    <form name="myform">

    <table border=0>

    <tr>

    <td style="height: 92px">

    <asp:ListBox ID="ListBox1" runat="server" Height="88px" Width="104px" SelectionMode=Multiple>

    </asp:ListBox>

    </td>

    <td style="height: 92px">

    <table align=center border=0>

    <tr>

    <td>

    <asp:ImageButton runat=server ID=imggt ImageUrl="~/Images/gt.gif" OnClientClick ="BLOCKED SCRIPTmove('ListBox1','ListBox2');" />

    </td>

    </tr>

    <tr><td></td></tr>

    <tr>

    <td>

    <asp:ImageButton runat=server ID=imglt ImageUrl="~/Images/lt.gif" OnClientClick="BLOCKED SCRIPTmove('ListBox2','ListBox1' );" />

    </td>

    </tr>

    </table>

    </td>

    <td style="height: 92px">

    <asp:ListBox ID="ListBox2" runat="server" Height="88px" Width="104px" SelectionMode=Multiple></asp:ListBox>

    </td>

    </tr>

    </table>

    </form>

    </body>

    </html>















































































































    In the code behind u need to add the coding w.r.t your requirement.



    string strSource;
    string strSQL;

    if ((txtHsource.Value) != "")
    {
    	strSource = Strings.Mid(Strings.Trim(txtHSource.Value), 0, Strings.Len(txtHSource.Value) - 1);
    	//if ur code is Varchar datatype u need to manipulate ur data like 'code1','code2','code3'
    	strSQL = "Select Code,Value From urTable Where Code in(" + strSource + ")";
    	//get the value from ur db table
    	//then bind the values into ur Target listbox
    	//Finally 
    	txtHSource.Value = "";
    }












    i hope this may helpful for u...

    Good Luck

    Regards
    Hari K......













    Report abuse
  • 13 years ago

    Hi hari,

    I got the values into the listbox.

    But when i click this  '>' button the values has to move from ListBox1 to ListBox2  and when i click this '<' button it has to happen viceversa.

    I wrote some code and I mentioned it above.

    But it's not working.

    Thank you so much.

     

     

     

     

    Report abuse
  • 13 years ago
    Hi Angarika
     First i want know that how do u achieve to get the listbox values. in ur 1st post u mentioned that i m geting only null values, thats y i m asking...

    reply ASAP...then only i can able to reply w.r.t ur coding style..

    Hari K......
    Report abuse
  • 13 years ago

    Hi Hari,

    I am sending u my files.

    This is my GridView.aspx page.......This is the start page of my application.

    <%

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

    <!

    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>

    </

    head>

    <

    body>

    <form id="form1" runat="server">

    <div>

    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns=False Height="160px" Width="184px" BackColor="White" BorderColor="#3366CC" BorderStyle="None" BorderWidth="1px" CellPadding="4">

    <Columns>

    <asp:BoundField DataField="Id" HeaderText="ID" />

    <asp:BoundField DataField ="Name" HeaderText="Name" />

    <asp:TemplateField HeaderText="Items">

    <ItemTemplate >

    <asp:DropDownList ID=ddlList runat=server OnSelectedIndexChanged=AppearUC AutoPostBack=true>

    <asp:ListItem Value=select>Select</asp:ListItem>

    <asp:ListItem Value=cse>CSE</asp:ListItem>

    <asp:ListItem Value=ece>ECE</asp:ListItem>

    </asp:DropDownList>

    </ItemTemplate>

    </asp:TemplateField>

    </Columns>

    <FooterStyle BackColor="#99CCCC" ForeColor="#003399" />

    <RowStyle BackColor="White" ForeColor="#003399" />

    <SelectedRowStyle BackColor="#009999" Font-Bold="True" ForeColor="#CCFF99" />

    <PagerStyle BackColor="#99CCCC" ForeColor="#003399" HorizontalAlign="Left" />

    <HeaderStyle BackColor="#003399" Font-Bold="True" ForeColor="#CCCCFF" />

    </asp:GridView>

    </div>

    </form>

    </

    body>

    </

    html>

    This is my GridView.aspx.cs.     Smiley Face [:)]

    using

     System;

    using

     System.Data;

    using

     System.Configuration;

    using

     System.Collections.Generic;

    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;

    using

     System.Data.SqlClient;

    using

     System.Reflection;

     

    public

     partial class GridView : System.Web.UI.Page

    {

    protected System.Web.UI.WebControls.DropDownList mySelector;

    protected void Page_Load(object sender, EventArgs e)

    {

    if (!Page.IsPostBack)

    {

    GridView1.DataSource = GetdataSet().Tables[0];

    GridView1.DataBind();

    }

    }

    private DataSet GetdataSet()

    {

    string query = @"select * from GridSample";

    string connectionString = @"Server=mkd2-167227\sqlexpress;Database=JoSample;Trusted_Connection=Yes";

    SqlConnection myConnection = new SqlConnection(connectionString);

    SqlDataAdapter ad = new SqlDataAdapter(query, myConnection);

    DataSet ds = new DataSet();

    ad.Fill(ds);

    return ds;

    }

    private UserControl LoadControl(string UserControlPath, params object[] constructorParameters)

    {

    List<Type> constParamTypes = new List<Type>();

    foreach (object constParam in constructorParameters)

    {

    constParamTypes.Add(constParam.GetType());

    }

    UserControl ctl = Page.LoadControl(UserControlPath) as UserControl;

    ConstructorInfo constructor = ctl.GetType().BaseType.GetConstructor(constParamTypes.ToArray());

    if (constructor == null)

    {

    throw new MemberAccessException("the requested constructor was not found on:" + ctl.GetType().BaseType.ToString());

    }

    else

    {

    constructor.Invoke(ctl, constructorParameters);

    }

    return ctl;

    }

    protected void AppearUC(object sender, EventArgs e)

    {

    DropDownList ddl = (DropDownList)sender;

    DataControlFieldCell cell = (DataControlFieldCell)ddl.Parent;

    if (ddl.SelectedIndex != 0)

    {

    cell.Controls.Add(LoadControl(

    "ListItem.ascx",ddl.SelectedValue));

    }

    }

    }

    This is my ListItem.ascx page

    <%

    @ Control Language="C#" AutoEventWireup="true" CodeFile="ListItem.ascx.cs" Inherits="ListItem"%>

    <

    html>

    <

    head>

    <

    script language="javascript" type="text/javascript">

    function

     move(source, target)

    {

    var source=document.getElementById(fbox);

    var target=document.getElementById(tbox);

    if((source!==null)&&(target!=null))

    {

    while(source.options.selectedIndex>=0)

    {

    var newOption=new Option();

    newOption.text=source.options[source.options.selectedIndex].text;

    newOption.value=source.options[source.options.selectedIndex].value;

    target.options[target.length]=newOption;

    source.remove(source.options.selectedInedx);

    }

    }

    }

    </

    script>

    </

    head>

    <

    body>

    <

    form name="myform">

    <

    table border=0>

    <

    tr>

    <

    td style="height: 92px">

    <

    asp:ListBox ID="ListBox1" runat="server" Height="88px" Width="104px" SelectionMode=Multiple>

    </

    asp:ListBox>

    </

    td>

    <

    td style="height: 92px">

    <

    table align=center border=0>

    <

    tr>

    <

    td>

    <

    asp:ImageButton runat=server ID=imggt ImageUrl="~/Images/gt.gif" OnClientClick ="BLOCKED SCRIPTmove('ListBox1','ListBox2');" />

    </

    td>

    </

    tr>

    <

    tr><td></td></tr>

    <

    tr>

    <

    td>

    <

    asp:ImageButton runat=server ID=imglt ImageUrl="~/Images/lt.gif" OnClientClick="BLOCKED SCRIPTmove('ListBox2','ListBox1');" />

    </

    td>

    </

    tr>

    </

    table>

    </

    td>

    <

    td style="height: 92px">

    <

    asp:ListBox ID="ListBox2" runat="server" Height="88px" Width="104px" SelectionMode=Multiple></asp:ListBox>

    </

    td>

    </

    tr>

    </

    table>

    </

    form>

    </

    body>

    </

    html>

    This is my ListItem.ascx.cs

    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;

    using

     System.Data.SqlClient;

    using

     System.Text;

    public

     partial class ListItem : System.Web.UI.UserControl

    {

    public ListItem()

    {

    }

    public ListItem(string ddlval)

    {

    DataSet ds = GetdataSet(ddlval);

    //ListBox1.DataSource = ds.Tables[0];

    //ListBox1.DataBind();

    ListBox1.DataSource = ds.Tables[0];

    ListBox1.DataTextField =

    "Subject";

    ListBox1.DataBind();

    }

    protected void Page_Load(object sender, EventArgs e)

    {

    }

    private DataSet GetdataSet(string val)

    {

    string query = @"select * from ListSample where Branch='"+val +"'";

    string connectionString = @"Server=mkd2-167227\sqlexpress;Database=JoSample;Trusted_Connection=Yes";

    SqlConnection myConnection = new SqlConnection(connectionString);

    SqlDataAdapter ad = new SqlDataAdapter(query, myConnection);

    DataSet ds = new DataSet();

    ad.Fill(ds);

    return ds;

    }

    }

    Sorry for dumping all the code...

    Thanking you.

    Angarika

     

    Report abuse
  • 13 years ago
    Hi Angarika,
     I m really bit confused where is the actual error...
     in the javascript move funcrion

     Sysntax error in the line, just remove one "=" (



    if((source!==null)&&(target!=null)))

    send ur file to my personal email id [email protected]


    Hari K......






     
    Report abuse
  • 13 years ago

    Hi Hari,

    Thank you so much

    I'll Send u my files.

    Angarika

    Report abuse
  • 13 years ago

    Hi Hari,

    I send the files.....

    A small correction in my file.....ListItem.ascx

    function

     move(fbox, tbox)

    {

    var source=document.getElementById(fbox);

    var target=document.getElementById(tbox);

    if((source!=null)&&(target!=null))

    {

    while(source.options.selectedIndex>=0)

    {

    var newOption=new Option();

    newOption.text=source.options[source.options.selectedIndex].text;

    newOption.value=source.options[source.options.selectedIndex].value;

    target.options[target.length]=newOption;

    source.remove(source.options.selectedInedx);

    }

    }

     

    change the function move() in the ListItem.ascx file which i sent u to ur gmailId with this code.

    Thanking you.
    Report abuse
  • 13 years ago
    Hi Angarika,
     Till now i didn't get your file...

    Hari K......
    Report abuse
  • 13 years ago

    Hi Hari,

    I already sent u the files to the id [email protected] with the subject angarika--files

     

    Report abuse
  • 13 years ago
    Hi Angarika,
     I am really sorry for my late reply...Because here we got power failure from yesterday 11 am onwords...



     Actually some circomstances only your concept is recommendable..Because each and every row in the gridview dropdown item change event get fire...Its not a recommandable one...Anyway...

    Anyway i rectified it, Here i am posting the coding...

    In your ListItem.ascx file...
    What i made change is bolded letter..

    <%@ Control Language="C#" AutoEventWireup="true" CodeFile="ListItem.ascx.cs" Inherits="ListItem" %>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head> 

    </head>
    <body>
        <form id="frmListItem">
            <table border="0">
                <tr>
                    <td style="height: 92px">
                        <asp:ListBox ID="ListBox1" runat="server" Height="88px" Width="104px" SelectionMode="Multiple">
                        </asp:ListBox>
                    </td>
                    <td style="height: 92px">
                        <table align="center" border="0">
                            <tr>
                                <td>
                                    <asp:ImageButton runat="server" ID="imggt" OnClientClick="return move('ListBox1','ListBox2');" ImageUrl="~/Images/gt.gif"/>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <asp:ImageButton runat="server" ID="imglt" OnClientClick="return move('ListBox2','ListBox1');" ImageUrl="~/Images/lt.gif"/>
                                </td>
                            </tr>
                        </table>
                    </td>
                    <td style="height: 92px">
                        <asp:ListBox ID="ListBox2" runat="server" Height="88px" Width="104px" SelectionMode="Multiple">
                        </asp:ListBox>
                    </td>
                </tr>
            </table>
        </form>
            <script language="javascript" type="text/javascript">
                //debugger
                function move(lst1,lst2)
                 {         
                    var source,target;
                    var tar,src;
                    var i=(document.forms[0].length)-1
                    
                   
                    if (lst1.toUpperCase()=='LISTBOX1')
                    {
                        tar=document.forms[0].item(i).id
                        src=tar.replace(lst2,lst1);             
                    }
                    else
                    {
                        src=document.forms[0].item(i).id
                        tar=src.replace(lst1,lst2);
                    }          
                   
                    source=document.getElementById(src);
                    target=document.getElementById(tar);
                                        
                     if((source!=null)&&(target!=null))
                     {
                        for(var iCount=0;iCount<source.length;iCount++)
                        {  
                             if(source.options[iCount].selected)
                             {
                                var newOption=new Option();
                                newOption.text=source.options[iCount].text;
                                newOption.value=source.options[iCount].value;
                                target.options[target.length]=newOption;                   
                             }                                 
                        }
                        for(var iCount=source.length-1;iCount>=0;iCount--)
                        {                                  
                             if(source.options[iCount].selected)
                             {
                                source.remove(iCount);                   
                             }                                 
                        }
                     }                 
                    
                     return false;
                }  
       
            </script>
    </body>
    </html>















































    I hope this may solve your problem...But i am not














    recommended this method in this scenerio.
     
    Good Luck

    Regards
    Hari K
    Report abuse
  • 13 years ago

    Hi Hari,

    Its working....

    Thank you so much for your response to my mails.....

    Keep in Touch.

    Bye.

    Take Care.

     

    ANGARIKA

    Report abuse
  • 13 years ago

    this is try data Stick out tongue [:P]

     

    Report abuse

Post a reply

Enter your message below

Sign in or Join us (it's free).

JavaScript forum discussion

JavaScript tutorials

Quick links

Recent activity

Contribute

Why not write for us? Or you could submit an event or a user group in your area. Alternatively just tell us what you think!

Web Development

Developer Jobs

Our tools

We've got automatic conversion tools to convert C# to VB.NET, VB.NET to C#. Also you can compress javascript and compress css and generate sql connection strings.

Cancel
“Better train people and risk they leave – than do nothing and risk they stay.” - Anonymous