Article

JQuery Multi Select DropDownList With CheckBox in Asp.net C# From Database

04 Jun 2015 Kamal Pratap
0 Comments 1543 Views



Here we explain the easiest way to create multi select dropdownlist in Asp.net, C# from SQL Server. We use bootstrap css & jquery to design multiselect dropdownlist.

JQuery Multi Select DropDownList With CheckBox in Asp.net C# From Database

Follow these steps to create the above multiselect dropdownlist.

JQuery Multi Select DropDownList With CheckBox in Asp.net C# From Database

SQL Database to Create Above Table:

CREATE TABLE [dbo].[tblCompany](
	[Id] [int] IDENTITY(1,1) NOT NULL,
	[Name] [nvarchar](50) NULL
) ON [PRIMARY]
GO
SET IDENTITY_INSERT [dbo].[tblCompany] ON
INSERT [dbo].[tblCompany] ([Id], [Name]) VALUES (1, N'Wipro')
INSERT [dbo].[tblCompany] ([Id], [Name]) VALUES (2, N'Accenture')
INSERT [dbo].[tblCompany] ([Id], [Name]) VALUES (3, N'HCL')
INSERT [dbo].[tblCompany] ([Id], [Name]) VALUES (4, N'Intelegencia')
INSERT [dbo].[tblCompany] ([Id], [Name]) VALUES (5, N'Nokia')
INSERT [dbo].[tblCompany] ([Id], [Name]) VALUES (6, N'Samsung')
INSERT [dbo].[tblCompany] ([Id], [Name]) VALUES (7, N'Matrix')
INSERT [dbo].[tblCompany] ([Id], [Name]) VALUES (8, N'Microsoft')
SET IDENTITY_INSERT [dbo].[tblCompany] OFF

Asp.Net :

   <div style="padding: 20px">
        Select Company
        <asp:ListBox ID="ddlCompany" runat="server" SelectionMode="Multiple"></asp:ListBox>
        <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*=ddlCompany]').multiselect({
                    includeSelectAllOption: true
                });
            });
        </script>
    </div>

C# :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;

public partial class Default3 : System.Web.UI.Page
{    
    protected void Page_Load(object sender, EventArgs e)
    {
        if(!IsPostBack)
        {
            bindCompany();
        }
    }
    protected void bindCompany()
    {
        string strConnection = "Data Source=.; uid=sa; pwd=sql;database=company;";
        SqlConnection con = new SqlConnection(strConnection);
        string com = "Select Id, Name From tblCompany Order By Name";
        SqlDataAdapter da = new SqlDataAdapter(com, con);
        DataTable dt = new DataTable();
        da.Fill(dt);
        if (dt.Rows.Count > 0)
        {
            ddlCompany.DataTextField = dt.Columns["Name"].ToString();
            ddlCompany.DataValueField = dt.Columns["id"].ToString();
            ddlCompany.DataSource = dt;
            ddlCompany.DataBind();
        }
    }

}

 

Kamal Pratap

I have 6+ years experience in .Net technologies like Asp.Net, C#, WCF, Web Services, SQL Server, Ajax, LinQ. Currently I am working in Netcarrots Loyalty Services as a Software Developer.

Comments

No coments found to display!

Leave a Comment