locked
Bootstrap Multi Select with Option category RRS feed

  • Question

  • User-809753952 posted

    How to create a Bootstrap Multi Select with Option category? I want to bind it with data from a sql table.

    Monday, March 4, 2019 12:28 PM

Answers

  • User839733648 posted

    Hi mnmhemaj,

    The key point to use Bootstrap MultiSelect is to use jquery to add the plugin.

    I've made a sample and maybe you could refer to.

    .aspx

    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="https://code.jquery.com/jquery-3.3.1.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 src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
        <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/css/bootstrap-multiselect.css" rel="stylesheet" type="text/css" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/js/bootstrap-multiselect.min.js"></script>
        <script type="text/javascript">
            $(function () {
                $("#ListBox1").multiselect({
                    includeSelectAllOption: true
                });
            });
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <asp:ListBox ID="ListBox1" runat="server" SelectionMode="Multiple"></asp:ListBox>
            </div>
        </form>
    </body>
    </html>
    

    code-behind.

            protected void Page_Load(object sender, EventArgs e)
            {
                if (!IsPostBack)
                {
                    BindData();
                }
    
            }
            string constr = ConfigurationManager.ConnectionStrings["YourConnectionString"].ConnectionString;
            private void BindData()
            {
                using (SqlConnection con = new SqlConnection(constr))
                {
                    string myquery = "SELECT * FROM tb_Fruit";
                    SqlCommand cmd = new SqlCommand(myquery, con);
                    con.Open();
                    SqlDataAdapter sda = new SqlDataAdapter(cmd);
                    DataSet ds = new DataSet();
                    sda.Fill(ds);
                    ListBox1.DataSource = ds;
                    ListBox1.DataTextField = "FruitName";
                    ListBox1.DataValueField = "FruitId";
                    ListBox1.DataBind();
                    con.Close();
                }
            }

    result:

    Reference: http://davidstutz.de/bootstrap-multiselect/ 

    Best Regards,

    Jenifer

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, March 5, 2019 3:49 AM
  • User839733648 posted

    Hi mnmhemaj,

    I suggest that you could dynamically add <optgroup> tag in your jquery.

    .aspx

    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="https://code.jquery.com/jquery-3.3.1.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 src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
        <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/css/bootstrap-multiselect.css" rel="stylesheet" type="text/css" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/js/bootstrap-multiselect.min.js"></script>
        <script type="text/javascript">
            $(function () {
                $("select#ListBox1 option[classification='LessThanFifty']").wrapAll("<optgroup label='Less than fifty'>");
                $("select#ListBox1 option[classification='GreaterThanFifty']").wrapAll("<optgroup label='Greater than fifty'>");
                $("#ListBox1").multiselect({
                    includeSelectAllOption: true
                });
            });
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <asp:ListBox ID="ListBox1" runat="server" SelectionMode="Multiple" OnDataBound="ListBox1_DataBound"></asp:ListBox>
            </div>
        </form>
    </body>
    </html>

    code-behind.

            protected void Page_Load(object sender, EventArgs e)
            {
                if (!IsPostBack)
                {
                    DataTable table = new DataTable();
                    table.Columns.Add("ID", typeof(int));
                    table.Columns.Add("Number", typeof(int));
                    table.Rows.Add(1, 57);
                    table.Rows.Add(2, 23);
                    table.Rows.Add(3, 99);
                    table.Rows.Add(4, 8);
                    table.Rows.Add(5, 74);
                    ListBox1.DataSource = table;
                    ListBox1.DataValueField = "ID";
                    ListBox1.DataTextField = "Number";
                    ListBox1.DataBind();
                }
    
            }

    result:

    Best Regards,

    Jenifer

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, March 6, 2019 7:13 AM

All replies

  • User839733648 posted

    Hi mnmhemaj,

    The key point to use Bootstrap MultiSelect is to use jquery to add the plugin.

    I've made a sample and maybe you could refer to.

    .aspx

    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="https://code.jquery.com/jquery-3.3.1.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 src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
        <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/css/bootstrap-multiselect.css" rel="stylesheet" type="text/css" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/js/bootstrap-multiselect.min.js"></script>
        <script type="text/javascript">
            $(function () {
                $("#ListBox1").multiselect({
                    includeSelectAllOption: true
                });
            });
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <asp:ListBox ID="ListBox1" runat="server" SelectionMode="Multiple"></asp:ListBox>
            </div>
        </form>
    </body>
    </html>
    

    code-behind.

            protected void Page_Load(object sender, EventArgs e)
            {
                if (!IsPostBack)
                {
                    BindData();
                }
    
            }
            string constr = ConfigurationManager.ConnectionStrings["YourConnectionString"].ConnectionString;
            private void BindData()
            {
                using (SqlConnection con = new SqlConnection(constr))
                {
                    string myquery = "SELECT * FROM tb_Fruit";
                    SqlCommand cmd = new SqlCommand(myquery, con);
                    con.Open();
                    SqlDataAdapter sda = new SqlDataAdapter(cmd);
                    DataSet ds = new DataSet();
                    sda.Fill(ds);
                    ListBox1.DataSource = ds;
                    ListBox1.DataTextField = "FruitName";
                    ListBox1.DataValueField = "FruitId";
                    ListBox1.DataBind();
                    con.Close();
                }
            }

    result:

    Reference: http://davidstutz.de/bootstrap-multiselect/ 

    Best Regards,

    Jenifer

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, March 5, 2019 3:49 AM
  • User-809753952 posted

    Hi Jernifer

    Thanks for your reply.

    I need a multi select grouped with different option header. 

    Tuesday, March 5, 2019 11:06 AM
  • User839733648 posted

    Hi mnmhemaj,

    I suggest that you could dynamically add <optgroup> tag in your jquery.

    .aspx

    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="https://code.jquery.com/jquery-3.3.1.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 src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
        <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/css/bootstrap-multiselect.css" rel="stylesheet" type="text/css" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/js/bootstrap-multiselect.min.js"></script>
        <script type="text/javascript">
            $(function () {
                $("select#ListBox1 option[classification='LessThanFifty']").wrapAll("<optgroup label='Less than fifty'>");
                $("select#ListBox1 option[classification='GreaterThanFifty']").wrapAll("<optgroup label='Greater than fifty'>");
                $("#ListBox1").multiselect({
                    includeSelectAllOption: true
                });
            });
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <asp:ListBox ID="ListBox1" runat="server" SelectionMode="Multiple" OnDataBound="ListBox1_DataBound"></asp:ListBox>
            </div>
        </form>
    </body>
    </html>

    code-behind.

            protected void Page_Load(object sender, EventArgs e)
            {
                if (!IsPostBack)
                {
                    DataTable table = new DataTable();
                    table.Columns.Add("ID", typeof(int));
                    table.Columns.Add("Number", typeof(int));
                    table.Rows.Add(1, 57);
                    table.Rows.Add(2, 23);
                    table.Rows.Add(3, 99);
                    table.Rows.Add(4, 8);
                    table.Rows.Add(5, 74);
                    ListBox1.DataSource = table;
                    ListBox1.DataValueField = "ID";
                    ListBox1.DataTextField = "Number";
                    ListBox1.DataBind();
                }
    
            }

    result:

    Best Regards,

    Jenifer

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, March 6, 2019 7:13 AM