Click here to Skip to main content
15,867,308 members
Articles / Web Development / ASP.NET

A Multiple Selection DropDownList (a CheckBoxList Inside a DropDownList)

Rate me:
Please Sign up or sign in to vote.
4.52/5 (22 votes)
19 Mar 2010CPOL2 min read 258.2K   18.6K   65   52
Check and mark more than one option in a DropDownList

Introduction

This ascx user control, the MultiCheckCombo, allows the user to select more than one option inside a DropDownList. The different items that are being checked are being copied in the box area of the control.

The great thing of this control is that it doesn't close the check panel until you click outside the control. Example: you can check more than one item at once.

In ASP.NET C#, if you need a web control that allows the user to check more than one option in a DropDownList, you can use this user control freely.

Background

Well, first of all, this control was made in Microsoft Visual Studio 2008, with .NET 3.5 (2.0) and was written in C#. To use it, you need to have properly installed the AjaxControlToolkit in your project.

Using the Code

Again: You need to have installed the AjaxControlToolkit in your project.

This control is fairly easy to implement. Simply copy the 3 ascx files into your project.

Then replace the namespace in both ascx and ascx.cs files with [YourProjectName].MultiCheckCombo.

E.g.: Let's suppose your project's name is TestMultiCheck, replace in the ascx file the Control tag with the name of your namespace/project:

ASP.NET
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="MultiCheckCombo.ascx.cs" 
    Inherits="TestMultiCheck.MultiCheckCombo" %>

And in your ascx.cs file, change the namespace to:

C#
namespace TestMultiCheck

Well, then drag and drop the main file (MultiCheckCombo.ascx) to your Page Designer.

You may drag the control inside or outside an UpdatePanel, but you need a ScriptManager at the beginning of the body tag of your aspx page.

ASP.NET
<asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> 

When you drag the control, the following line should be added automatically to the beginning of your aspx page:

ASP.NET
<%@ Register src="MultiCheckCombo.ascx" tagname="MultiCheckCombo" tagprefix="uc1" %>

And the code of the control looks like this (it also will be added automatically):

ASP.NET
<uc1:MultiCheckCombo ID="MultiCheckCombo1" runat="server" />        

Then, in the code behind (C#), you have to fill the values of the control.

You can fill it with an ArrayList or with an OdbcDataReader.

A: Easy mode: Filling the MultiCheckCombo with an ArrayList:

C#
ArrayList array = new ArrayList();
for (int i=0;i<100;i++) array.Add(i.ToString());
MultiCheckCombo1.AddItems(array);

B: Other option is to fill the MultiCheckCombo with an OdbcDataReader:

C#
OdbcConnection con = /* get YOUR connection string*/
con.Open();
OdbcCommand cmd = new OdbcCommand();
cmd.Connection = con;
cmd.CommandText = "select text,id from ...........";
OdbcDataReader dr = cmd.ExecuteReader();
MultiCheckCombo1.ClearAll();
dr.Read(); 
MultiCheckCombo1.AddItems(dr, "text", "id");

And that's it. You can now test it.

Some important properties of this controls are:

C#
MultiCheckCombo1.WidthCheckListBox = 200; //Set the Width of the CheckBoxList inside DDL.
MultiCheckCombo1.Width = 250; //Set the Width of the DropDownList
MultiCheckCombo1.Enabled = true;
MultiCheckCombo1.fontSizeCheckBoxList = FontUnit.Small; 
MultiCheckCombo1.fontSizeTextBox = FontUnit.XSmall;
MultiCheckCombo1.Text; //Get or Set the Text shown in the Combo

Some important methods of this control are:

C#
MultiCheckCombo1.unselectAllItems(); //Uncheck all of the Items of the CheckBox
MultiCheckCombo1.ClearAll(); //Delete all the Items of the CheckBox;

Points of Interest

I hope you can make it work. Cheers! ENJOY IT!

By the way, my e-mail is leoivix@hotmail.com.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Web Developer
Argentina Argentina
Systems Eng.

Comments and Discussions

 
GeneralRe: Select All option????? Pin
Member 1124551618-Nov-14 20:26
Member 1124551618-Nov-14 20:26 
GeneralMy vote of 4 Pin
Chintan Udeshi4-Jul-12 19:40
Chintan Udeshi4-Jul-12 19:40 
QuestionHow to make checkboxs checked on page load Pin
sheetal20129-Jun-12 9:22
sheetal20129-Jun-12 9:22 
QuestionRESOLVED FOR C#: Multiple MultiCheckCombo controls on same page, textboxes getting wrong selections / Plus solution to undefined showing up in explorer Pin
s.hashmi20-May-12 22:03
s.hashmi20-May-12 22:03 
AnswerRe: RESOLVED FOR C#: Multiple MultiCheckCombo controls on same page, textboxes getting wrong selections / Plus solution to undefined showing up in explorer Pin
Member 415786215-Sep-12 6:47
Member 415786215-Sep-12 6:47 
GeneralRe: RESOLVED FOR C#: Multiple MultiCheckCombo controls on same page, textboxes getting wrong selections / Plus solution to undefined showing up in explorer Pin
oozz_6-Dec-12 2:15
oozz_6-Dec-12 2:15 
AnswerRe: RESOLVED FOR C#: Multiple MultiCheckCombo controls on same page, textboxes getting wrong selections / Plus solution to undefined showing up in explorer Pin
cooldiv4u31-May-13 6:06
cooldiv4u31-May-13 6:06 
QuestionTakes up multiple lines in datagrid Pin
Member 219182726-Oct-11 8:13
Member 219182726-Oct-11 8:13 
I integrated the control/code into a datagrid, and it works fine but I get the checkbox on one line and the text (name) on the next line (instead of [x] {Text} like the example). Maybe because I use a template column and set it to text-only unless editing? ASPX code below.

XML
<asp:TemplateColumn HeaderText="Employee Name (ID) List" Visible="False">
    <HeaderStyle Width="250px"></HeaderStyle>
    <ItemTemplate>
        <uc1:MultiCheckCombo ID="MultiCheckCombo1" runat="server"/>
    </ItemTemplate>
    <EditItemTemplate>
        <uc1:MultiCheckCombo ID="MultiCheckCombo2" runat="server"/>
    </EditItemTemplate>
</asp:TemplateColumn>


Confused | :confused:
AnswerRe: Takes up multiple lines in datagrid Pin
s.hashmi20-May-12 22:15
s.hashmi20-May-12 22:15 
AnswerRe: Takes up multiple lines in datagrid Pin
cooldiv4u31-May-13 5:26
cooldiv4u31-May-13 5:26 
QuestionUndefined value in text box Pin
faisalharoon3-Oct-11 18:38
faisalharoon3-Oct-11 18:38 
AnswerRe: Undefined value in text box Pin
leoivix4-Oct-11 2:10
leoivix4-Oct-11 2:10 
GeneralRe: Undefined value in text box Pin
faisalharoon5-Oct-11 22:59
faisalharoon5-Oct-11 22:59 
AnswerRe: Undefined value in text box Pin
bimboy_14311-Nov-11 8:49
bimboy_14311-Nov-11 8:49 
Questioninstantiate via code Pin
mikeng11121-Sep-11 7:37
mikeng11121-Sep-11 7:37 
Questionget ID and Text from it Pin
Yasser Zaid28-Aug-11 15:40
Yasser Zaid28-Aug-11 15:40 
AnswerRe: get ID and Text from it [modified] Pin
leoivix30-Aug-11 2:24
leoivix30-Aug-11 2:24 
GeneralMy vote of 5 Pin
Member 798862126-Jul-11 23:35
Member 798862126-Jul-11 23:35 
Generalmultiple MultiCheckCombo in same page Pin
Marco Trova16-Aug-10 23:04
Marco Trova16-Aug-10 23:04 
GeneralRe: multiple MultiCheckCombo in same page Pin
boonjiann16-Sep-10 18:23
boonjiann16-Sep-10 18:23 
GeneralRe: multiple MultiCheckCombo in same page Pin
math2021-Jul-11 18:33
math2021-Jul-11 18:33 
BugRe: multiple MultiCheckCombo in same page Pin
bhfaisal9-Aug-11 21:55
bhfaisal9-Aug-11 21:55 
GeneralRe: multiple MultiCheckCombo in same page Pin
irfankoprucu1-Mar-12 4:28
irfankoprucu1-Mar-12 4:28 
GeneralRe: multiple MultiCheckCombo in same page Pin
s.hashmi20-May-12 22:24
s.hashmi20-May-12 22:24 
QuestionEvents for this conrol Pin
Thushar Saseendran4-Aug-10 3:11
Thushar Saseendran4-Aug-10 3:11 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.