[Solved] Bootstrap MultiSelect DropDownList from Database not displaying CheckBoxes

Last Reply on Jan 03, 2018 02:24 AM By dharmendr

Posted on Jan 02, 2018 11:51 PM

Show values from database in the dropdown list.

This is showing like this which i do not need.

where as i want to display look like this

I have written this HTML

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"
<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*=lstHead]').multiselect({

includeSelectAllOption: true

});

});

</script>

 

<div class="col-md-3">

<label class="control-label" style="margin-top: 10px;">Head</label>

<asp:ListBox ID="lstHead" runat="server" SelectionMode="Multiple"

AutoPostBack="true" class="form-control"

onselectedindexchanged="lstHead_SelectedIndexChanged">

</asp:ListBox>
Posted on Jan 03, 2018 02:24 AM Modified on on Jan 03, 2018 11:49 PM

Hi smile,

Check this example. Now please take its reference and correct your code.

Database

For this example I have used below database table with the following schema and data.

CREATE TABLE [dbo].[Fruits](
	[FruitId] [int] NOT NULL,
	[FruitName] [varchar](30) NOT NULL,
 CONSTRAINT [PK_Fruits_1] PRIMARY KEY CLUSTERED 
(
	[FruitId] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]

GO
SET ANSI_PADDING OFF
GO
INSERT [dbo].[Fruits] ([FruitId], [FruitName]) VALUES (1, N'Mango')
GO
INSERT [dbo].[Fruits] ([FruitId], [FruitName]) VALUES (2, N'Orange')
GO
INSERT [dbo].[Fruits] ([FruitId], [FruitName]) VALUES (3, N'Banana')
GO
INSERT [dbo].[Fruits] ([FruitId], [FruitName]) VALUES (4, N'Apple')
GO
INSERT [dbo].[Fruits] ([FruitId], [FruitName]) VALUES (5, N'Papaya')
GO

HTML

MasterPage.master

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>

<!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></title>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
        </asp:ContentPlaceHolder>
    </div>
    </form>
</body>
</html>

CS.aspx

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true"
    CodeFile="CS.aspx.cs" Inherits="CS" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <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*=lstHead]').multiselect({ includeSelectAllOption: true });
        });
    </script>
    <div class="col-md-3">
        <label class="control-label" style="margin-top: 10px;">
            Head</label>
        <asp:ListBox ID="lstHead" runat="server" SelectionMode="Multiple" AutoPostBack="true"
            OnSelectedIndexChanged="lstHead_SelectedIndexChanged" class="form-control"></asp:ListBox>
        <asp:Button Text="Submit" OnClick="Submit" runat="server" CssClass="btn btn-default" />
    </div>
</asp:Content>

Namespaces

C#

using System.Configuration;
using System.Data;
using System.Data.SqlClient;

VB.Net

Imports System.Data
Imports System.Data.SqlClient

Code

CS.aspx.cs

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        lstHead.DataSource = GetData("SELECT FruitId,FruitName FROM Fruits");
        lstHead.DataTextField = "FruitName";
        lstHead.DataValueField = "FruitId";
        lstHead.DataBind();
    }
}

protected void Submit(object sender, EventArgs e)
{
    string message = "";
    foreach (ListItem item in lstHead.Items)
    {
        if (item.Selected)
        {
            message += item.Text + " " + item.Value + "\\n";
        }
    }
    ClientScript.RegisterClientScriptBlock(this.GetType(), "alert", "alert('" + message + "');", true);
}

protected void lstHead_SelectedIndexChanged(object sender, EventArgs e)
{

}

private DataSet GetData(string query)
{
    string conString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    SqlCommand cmd = new SqlCommand(query);
    using (SqlConnection con = new SqlConnection(conString))
    {
        using (SqlDataAdapter sda = new SqlDataAdapter())
        {
            cmd.Connection = con;
            sda.SelectCommand = cmd;
            using (DataSet ds = new DataSet())
            {
                sda.Fill(ds);
                return ds;
            }
        }
    }
}

VB.aspx.vb

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not IsPostBack Then
        lstHead.DataSource = GetData("SELECT FruitId,FruitName FROM Fruits")
        lstHead.DataTextField = "FruitName"
        lstHead.DataValueField = "FruitId"
        lstHead.DataBind()
    End If
End Sub

Protected Sub Submit(ByVal sender As Object, ByVal e As EventArgs)
    Dim message As String = ""
    For Each item As ListItem In lstHead.Items
        If item.Selected Then
            message += item.Text & " " + item.Value & "\n"
        End If
    Next

    ClientScript.RegisterClientScriptBlock(Me.[GetType](), "alert", "alert('" & message & "');", True)
End Sub

Protected Sub lstHead_SelectedIndexChanged(ByVal sender As Object, ByVal e As EventArgs)
End Sub

Private Function GetData(ByVal query As String) As DataSet
    Dim conString As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
    Dim cmd As SqlCommand = New SqlCommand(query)
    Using con As SqlConnection = New SqlConnection(conString)
        Using sda As SqlDataAdapter = New SqlDataAdapter()
            cmd.Connection = con
            sda.SelectCommand = cmd
            Using ds As DataSet = New DataSet()
                sda.Fill(ds)
                Return ds
            End Using
        End Using
    End Using
End Function

Screenshot