locked
Multi Select dropdown with CheckBox RRS feed

  • Question

  • User-1499457942 posted

    Hi

      How to display multiselect dropdown with CheckBox and save values in one field with comma separation. Then how to show selected values when retreived.

    I have below code

    $(document).ready(function () {
    $('[id*=ddl_Location]').multiselect({
    includeSelectAllOption: true
    });
    });

    Thanks

    Saturday, November 3, 2018 9:01 AM

Answers

  • User839733648 posted

    Hi JagjitSingh,

    According to your description and code, I've made a sample on my side and maybe you could refer to it

    The key point is that you should bind the related data in the event RowDataBound.

    .Aspx

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SelectGV.aspx.cs" Inherits="CaseDemo827.SelectGV" %>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.3.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*=listItemBox]').multiselect({
                    includeSelectAllOption: true
                });
            });
    
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" OnRowDataBound="GridView_RowDataBound">
                    <Columns>
                        <asp:TemplateField HeaderText="Name">
                            <ItemTemplate>
                                <asp:Label ID="lblName" runat="server" Text='<%# Eval("Name") %>'></asp:Label>
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="ShowList">
                            <ItemTemplate>
                                <asp:ListBox ID="listItemBox" runat="server" SelectionMode="Multiple">
                                    <asp:ListItem Value="1">1</asp:ListItem>
                                    <asp:ListItem Value="2">2</asp:ListItem>
                                    <asp:ListItem Value="3">3</asp:ListItem>
                                </asp:ListBox>
                            </ItemTemplate>
                        </asp:TemplateField>
                    </Columns>
                </asp:GridView>
                <asp:Button ID="btnSave" runat="server" Text="Save" OnClick="btnSave_Click" />
            </div>
        </form>
    </body>
    </html>
    
    

    Code-behind.

            protected void Page_Load(object sender, EventArgs e)
            {
                if (!IsPostBack)
                {
                    BindData();
                }
            }
            string constr = ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;
            public void BindData()
            {
                DataTable dt = new DataTable();
                dt.Columns.Add("Name");
                using (SqlConnection con = new SqlConnection(constr))
                {
                    using (SqlCommand cmd = new SqlCommand("SELECT * FROM tb_Select", con))
                    {
                        con.Open();
                        using (SqlDataReader sdr = cmd.ExecuteReader())
                        {
                            while (sdr.Read())
                            {
                                DataRow row = dt.NewRow();
                                row["Name"] = sdr["Name"];
                                dt.Rows.Add(row);
                            }
    
                        }
                    }
                    con.Close();
                    GridView1.DataSource = dt;
                    GridView1.DataBind();
                }
    
            }
    
            protected void GridView_RowDataBound(object sender, GridViewRowEventArgs e)
            {
                if (e.Row.RowType == DataControlRowType.DataRow)
                {
                    string queryname = ((Label)e.Row.Cells[0].FindControl("lblName")).Text;
                    using (SqlConnection con = new SqlConnection(constr))
                    {
                        string myQuery = "SELECT * FROM tb_Select WHERE Name=@Name";
                        SqlCommand cmd = new SqlCommand();
                        cmd.CommandText = myQuery;
                        cmd.CommandType = CommandType.Text;
                        cmd.Parameters.AddWithValue("Name", queryname);
                        cmd.Connection = con;
                        con.Open();
                        SqlDataReader sdr = cmd.ExecuteReader();
                        if (sdr.HasRows)
                        {
                            while (sdr.Read())
                            {
                                var arr = sdr.GetString(1).Split(',');
                                var listboxes = e.Row.FindControl("listItemBox") as ListBox;
                                foreach (ListItem item in listboxes.Items)
                                {
                                    item.Selected = arr.Contains(item.Value);
                                }
                            }
                        }
                        con.Close();
                    }
                }
    
            }
    
            protected void btnSave_Click(object sender, EventArgs e)
            {
                foreach (GridViewRow row in GridView1.Rows)
                {
                    if (row.RowType == DataControlRowType.DataRow)
                    {
                        string queryname = ((Label)row.FindControl("lblName")).Text;
                        var listboxes = row.FindControl("listItemBox") as ListBox;
                        string Info = string.Empty;
                        foreach (ListItem item in listboxes.Items)
                        {
                            if (item.Selected)
                            {
                                Info += item.Text + ",";
                            }
                        }
    
                        using (SqlConnection con = new SqlConnection(constr))
                        {
                            string myQuery = "UPDATE tb_Select SET Info=@Info WHERE Name=@Name";
                            SqlCommand cmd = new SqlCommand();
                            cmd.CommandText = myQuery;
                            cmd.CommandType = CommandType.Text;
                            cmd.Parameters.AddWithValue("Name", queryname);
                            cmd.Parameters.AddWithValue("Info", Info);
                            cmd.Connection = con;
                            con.Open();
                            cmd.ExecuteNonQuery();
                            con.Close();
                        }
                    }
                }
    
            }

    Database.

    result.

    Best Regards,

    Jenifer

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, November 5, 2018 7:07 AM