How to insert comma based values in textbox , the multiple values selected from dropdownlist

Question

1.00/5 (2 votes)

See more:

, +

Hi
I am working on asp gridview and on selecting multiple values from dropdown list using checkboxes I want to get the values in label field separated by comma ...

What I have tried:

C#

protected void dd2_selectedindexchanged(object sender, EventArgs e)
       {
           DropDownList DropDownList1 = sender as DropDownList;
           foreach (GridViewRow row in gvDetails.Rows)
           {
               Control ctrl = row.FindControl("DropDownList2") as DropDownList;
               Control ctr = row.FindControl("Label4") as Label;
               Label Label2 = row.FindControl("Label4") as Label;
               Label2.Text += DropDownList1.SelectedValue + ", ";




           }
       }

Posted 29-Mar-17 3:44am

Member 12605293

Updated 30-Mar-17 19:21pm

Add a Solution

Comments

Bryian Tan 29-Mar-17 10:28am

Are you using a third party dropdown control?

Member 12605293 29-Mar-17 22:15pm

Hi Bryian.
It is not third party

Richard Deeming 31-Mar-17 9:44am

Unless your name is David Stutz, Bootstrap Multiselect[^] is most definitely a third-party component.

[no name] 29-Mar-17 10:29am

What issue you are facing here..

Member 12605293 29-Mar-17 22:14pm

Hi vinod
Thanks for your reply.The dropdown is working good I can able to choose multiple options with jquery check box,but while inserting only one value is inserted,amoung the selected value

Member 12605293 29-Mar-17 22:19pm

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css"
    rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css" rel="stylesheet" type="text/css" />
<script src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js" type="text/javascript"></script>
<script type="text/javascript">


    $(function () {
        $('[id*=DropDownList2],[id*=DropDownList3]').multiselect({
            includeAllOption: true
        });
    });
   
    
   
</script>

<asp:TemplateField HeaderText="Skills">  
                            <edititemtemplate>  
                                <asp:DropDownList ID="DropDownList2" multiple="multiple" runat="server" >  
  
                                     
                                  
                              
                            <itemtemplate>  
                                <asp:Label ID="Label4" runat="server" Text='<%#Eval("Departmentid") %>' >  
                                  
                             
                
                <footertemplate>
                            <asp:DropDownList ID="DropDownList3" multiple="multiple"   runat="server" OnSelectedIndexChanged="dd1_selectedindexchanged"  >  
  
                                     
                                 
                            
                         
                          </pre

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Karthik_Mahalingam · Accepted Answer · 2017-03-30T19:21:00

Solution 1

try

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css"
        rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
    <link href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css" rel="stylesheet" type="text/css" />
    <script src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js" type="text/javascript"></script>
    <script type="text/javascript">


        $(function () {
            $('.classDropDownList2').multiselect({
                includeAllOption: true,
                onChange: function (a,b,c) {
                    var val = a.parent().val();
                    var text = '';
                    if (val)
                        text = val.join(',');
                    $(a).closest('tr').find('.classsLabel4').text(text);

                }
            });
        });



    </script>


</head>
<body>
    <form id="form1" runat="server">


        <asp:GridView ID="gv" runat="server" AutoGenerateColumns="false">
            <Columns>
                <asp:TemplateField>
                    <HeaderTemplate>
                        Column1 
                    </HeaderTemplate>
                    <ItemTemplate>
                        <asp:DropDownList CssClass="classDropDownList2" ID="DropDownList2" multiple="multiple" runat="server">
                            <asp:ListItem Text="-select-" Value="" />
                            <asp:ListItem Text="one" Value="1" />
                            <asp:ListItem Text="two" Value="2" />
                            <asp:ListItem Text="three" Value="3" />
                        </asp:DropDownList>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField>
                    <HeaderTemplate>
                        Column2
                    </HeaderTemplate>
                    <ItemTemplate>

                        <asp:Label CssClass="classsLabel4" ID="Label4" runat="server" Text='<%#Eval("Departmentid") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>

            </Columns>
        </asp:GridView>


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

C#

protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                DataTable dt = GetDataTable();
                gv.DataSource = dt;
                gv.DataBind();
            }
        }

Posted 30-Mar-17 19:21pm

Karthik_Mahalingam

Comments

Member 12605293 31-Mar-17 2:30am

Hi Karthik
Thanks for the code karthik. It is not working.Shall I send my snippets??

Karthik_Mahalingam 31-Mar-17 2:35am

create a new page and run this code

protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
DataTable dt = GetDataTable();
gv.DataSource = dt;
gv.DataBind();
}
}

private static DataTable GetDataTable()
{
DataTable dt = new DataTable();
dt.Columns.Add("Departmentid");
dt.Columns.Add("Column2");
dt.Columns.Add("Column3");
dt.Rows.Add("apple", "ant", "animal");
dt.Rows.Add("bat", "ball", "bull");
dt.Rows.Add("cat", "call", "con");
dt.Rows.Add("dog", "doll", "dice");
return dt;
}

Karthik_Mahalingam 31-Mar-17 3:01am

use class, dont use id

Member 12605293 31-Mar-17 3:02am

Hi Karthik
here is my code


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css"
        rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
    <link href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css" rel="stylesheet" type="text/css" />
    <script src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js" type="text/javascript"></script>
    <script type="text/javascript">


        $(function () {
            $('[id*=DropDownList2],[id*=DropDownList3]').multiselect({
                includeAllOption: true,
                onChange: function (a, b, c) {
                    var val = a.parent().val();
                    var text = '';
                    if (val)
                        text = val.join(',');
                    $(a).closest('div').find('.Label4').text(text);

                }
            });
        });
     
</script>   
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:GridView ID="gvDetails" style="background-color:lightgreen;     border-collapse: collapse;
    background-color: lightgreen;
    margin-top: -53px;" DataKeyNames="empid,name" runat="server"
                
                AutoGenerateColumns="false" HeaderStyle-BackColor="#61A6F8"
                ShowFooter="true" HeaderStyle-Font-Bold="true" HeaderStyle-ForeColor="White"
                CellPadding="10" CellSpacing="0"
                AllowPaging="true" PageSize="5"
                AllowSorting="True" OnRowDataBound="gvDetails_OnRowDataBound"
                OnRowCancelingEdit="gvDetails_RowCancelingEdit"
                OnRowDeleting="gvDetails_RowDeleting" OnRowEditing="gvDetails_RowEditing"
                OnRowUpdating="gvDetails_RowUpdating"
                OnRowCommand="gvDetails_RowCommand">

        <Columns >
                    <asp:TemplateField  HeaderText="EmployeeID">
                        <ItemTemplate>
                            <asp:Label ID="lblempid" runat="server" class="clsempid"
                                Text='<%# Eval("empid")%>'></asp:Label>
                        </ItemTemplate>
                        <FooterTemplate>
                            <asp:TextBox ID="txtempid" 
                                MaxLength="5" runat="server"></asp:TextBox>
                            
                        </FooterTemplate>
                    </asp:TemplateField>



                    <asp:TemplateField HeaderText="EmployeeName">
                        <EditItemTemplate>
                            <asp:TextBox ID="txtempname" runat="server"   Text='<%#Eval("name") %>' />
                        </EditItemTemplate>
                        <ItemTemplate>
                            <asp:Label ID="lblempname" runat="server"  Text='<%#Eval("name") %>' />
                        </ItemTemplate>
                        <FooterTemplate>
                            <asp:TextBox ID="txtempname1" runat="server"  AutoPostBack="true"  onkeypress="hidedialog(this)" />
                            
                        </FooterTemplate>
                    </asp:TemplateField>
            <asp:TemplateField HeaderText="Skills">  
                            <EditItemTemplate>  
                                <asp:DropDownList ID="DropDownList2" multiple="multiple" runat="server" >

Karthik_Mahalingam 31-Mar-17 3:11am

use class, dont use id

Member 12605293 31-Mar-17 3:17am

Hi yes I have changed from tr to div in script,while selecting the values the query works good 1,2,3..But on inserting record using button it stores the first value in Database as well as show in label.

Karthik_Mahalingam 31-Mar-17 3:23am

you will have to debug and check.
try storing in hiddenfield and get in server.
since updating a value in label cant be reached in server.

Member 12605293 31-Mar-17 3:17am

<asp:TemplateField HeaderText="Skills">  
                            <EditItemTemplate>  
                                <asp:DropDownList ID="DropDownList2" multiple="multiple" runat="server" >  
  
                                     
                                </asp:DropDownList>  
                            </EditItemTemplate>  
                            

                                 <ItemTemplate>

                        <asp:Label CssClass="classsLabel4" ID="Label4" runat="server" Text='<%#Eval("Departmentid") %>'></asp:Label>
                    </ItemTemplate>
                                
                
                <FooterTemplate>
                            <asp:DropDownList ID="DropDownList3" multiple="multiple"   runat="server" OnSelectedIndexChanged="dd1_selectedindexchanged" >  
  
                                     
                                </asp:DropDownList> 
                            
                        </FooterTemplate> 
                        </asp:TemplateField>  


             <asp:TemplateField HeaderText="Edit/Delete" HeaderStyle-Width="5%">
                        <EditItemTemplate>
                            <asp:ImageButton ID="imgbtnUpdate" onkeypress="return (function (a,b,c))"  CommandName="Update" runat="server" ImageUrl="~/Images/update.png" ToolTip="Update" Height="20px" Width="20px" />
                            <asp:ImageButton ID="imgbtnCancel" runat="server" CommandName="Cancel" ImageUrl="~/Images/cancel.png" ToolTip="Cancel" Height="20px" Width="20px" />
                        </EditItemTemplate>
                        <ItemTemplate>
                            <asp:ImageButton ID="imgbtnEdit" onkeypress="return (function (a,b,c))" CommandName="Edit"  runat="server" ImageUrl="~/Images/Insert.png" ToolTip="Edit" Height="20px" Width="20px" />
                            <asp:ImageButton ID="imgbtnDelete" CommandName="Delete" Text="Edit" runat="server" ImageUrl="~/Images/delete.png" ToolTip="Delete" Height="10px" Width="10px" />
                        </ItemTemplate>
                        <FooterTemplate>
                            <asp:ImageButton ID="imgbtnAdd" onkeypress="return (function (a,b,c))"  runat="server" ImageUrl="~/Images/Add.png" CommandName="Add" Width="20px" Height="20px" ToolTip="Add new User"  OnClientClick="GetGridFooterRowvalues()" />
                        </FooterTemplate>
                    </asp:TemplateField>

            </Columns>

Member 12605293 31-Mar-17 3:22am

And Also while adding or editing the previous label shows the currently selecting values.

<asp:TemplateField HeaderText="Skills">  
                            <EditItemTemplate>  
                                <asp:DropDownList ID="DropDownList2" multiple="multiple" runat="server" >  
  
                                     
                                </asp:DropDownList>  
                            </EditItemTemplate>  
                            

                                 <ItemTemplate>

                        <asp:Label CssClass="classsLabel4" ID="Label4" runat="server" Text='<%#Eval("Departmentid") %>'></asp:Label>
                    </ItemTemplate>
                                
                
                <FooterTemplate>
                            <asp:DropDownList ID="DropDownList3" multiple="multiple"   runat="server" OnSelectedIndexChanged="dd1_selectedindexchanged" >  
  
                                     
                                </asp:DropDownList> 
                            
                        </FooterTemplate> 
                        </asp:TemplateField>

Karthik_Mahalingam 31-Mar-17 3:24am

debug it.
use javascript debugger,
c# break point.

Member 12605293 31-Mar-17 3:40am

ok karthik

            <ItemTemplate>

                        <asp:Label  ID="Label4" runat="server" CssClass="classsLabel4" Text='<%#Eval("Departmentid") %>'></asp:Label>
                                     <asp:HiddenField ID="hdnResultValue" Value="0" runat="server" />
                    </ItemTemplate>

Member 12605293 31-Mar-17 4:54am

Hi Karthik
I have debugged and saw the values passing it shows (1,'abc',1) but i have selected 3 values from checkbox

Member 12605293 31-Mar-17 4:56am

By using the label class,since its id is declared in jquery it shows the same values suppose if i select 2 and 3 ,It gets reflected in all the row as 2

Karthik_Mahalingam 31-Mar-17 5:09am

ok.

Member 12605293 31-Mar-17 6:13am

How to make overcome this issue?

Karthik_Mahalingam 31-Mar-17 6:20am

find in context of the tr row

Member 12605293 5-Apr-17 2:29am

Hi Karthik
Good Morning

Karthik_Mahalingam 5-Apr-17 2:31am

gm

Member 12605293 5-Apr-17 2:53am

Hi Karthik
How to use Linq to sql in project?Use in the sence to reduce the usage query line in code using objects

Karthik_Mahalingam 5-Apr-17 3:08am

why do you need Linq to SQL?
is it mvc?

Member 12605293 5-Apr-17 3:12am

No but I vied few website of using Linq to sql in codebehind just to learn using..Please give me your suggestion.I dont know abt mvc

Karthik_Mahalingam 5-Apr-17 3:17am

if you are using ASP this is of no use. this will make the app more complex.
i personally suggest not to use linq to sql, instead write some helper methods to achieve the same.
It will be difficult to modify the code later.

Member 12605293 5-Apr-17 3:24am

Thanks Karthik.
What about using Entity Framework?

Karthik_Mahalingam 5-Apr-17 3:27am

I haven't used so far, I always work on the core, ADO.net, i dont like wrapper,

Karthik_Mahalingam 5-Apr-17 3:28am

ulimately they will convert the datatable to an Ienumerable list, thats it.
that we can achieve using a helper method.

Member 12605293 5-Apr-17 3:29am

ok Sir

Karthik_Mahalingam 5-Apr-17 3:37am

see it all depends on the project and the needs.

Member 12605293 5-Apr-17 3:44am

ok

Member 12605293 5-Apr-17 5:30am

Is Linq is related to MVC?

Karthik_Mahalingam 5-Apr-17 5:35am

Linq is related c# which can be used in any platform.

Karthik_Mahalingam 5-Apr-17 5:36am

I think you should start learning c#

Member 12605293 5-Apr-17 5:48am

Ok Sir.So we can also use in vb

Karthik_Mahalingam 5-Apr-17 5:51am

i am out from vb, used it 5 years back :)

concept is same but the syntax differs

Member 12605293 5-Apr-17 6:20am

Ok Sir.