[Solved] Bootstrap MultiSelect DropDownList from Database not displaying CheckBoxes

Last Reply 14 days ago By dharmendr

Posted 14 days ago

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>
You are viewing reply posted by: dharmendr 14 days ago.
Posted 14 days ago Modified on 13 days ago

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

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html