Click here to Skip to main content
15,905,028 members
Search within:


Articles / Web Development / ASP.NET
 
Article

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 259.8K   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
leoivix
Web Developer
Argentina Argentina
Systems Eng.

Comments and Discussions

 
FirstPrevNext
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 
In MultiCheckCombo.ascx change function CheckItem () here:

C#
// Added by SH
    // getting clientID of current textbox clicked

    var currentClientID = document.getElementById('<%=txtVal.ClientID %>').value;

    // Changed by SH
    //var TxtBox = document.getElementById("<%=txtCombo.ClientID%>");
    var TxtBox = document.getElementById(currentClientID);

    TxtBox.value = s;
    document.getElementById('<%=hidVal.ClientID %>').value = s;


Add a hidden input control in MultiCheckCombo.ascx:
C#
<input type="hidden" name="txtVal" id="txtVal" runat="server" />


Add a function to get the current client ID:

C#
// Added by SH
function getClientID (tBox)
{
    document.getElementById('<%=txtVal.ClientID %>').value = tBox;
}



Add onclick="getClientID(this.id) in txtCombo, making it:

C#
<asp:TextBox ID="txtCombo" runat="server" ReadOnly="true" Width="200" Font-Size="X-Small" onclick="getClientID(this.id)"></asp:TextBox>


Basically what was happening was that
C#
document.getElementById("<%=txtCombo.ClientID%>");

was getting the clientID of the last MultiCheckCombo control added to the page. When the user clicks on txtCombo textbox to bring out the checkboxlist, the client of the last textbox was being read as its using document.getElementByID.
The solution was to send the clientID of the respective textbox that the user clicked with the onclick event of the textbox. This calls the getClientID function which effectively sets the value of the hidden input control to the clientID of the textbox.
Now when onclick event of chkList checkboxlist is triggered, the checkitem() function first reads the value of the hidden input control txtVal and then uses that value to get to the right textbox into txtbox variable, to which the value of var s is then assigned.

In order to fix undefined showing up in the textbox when using microsoft explorer, change innerType to innerHTML as shown below in function CheckItem():

C#
// Changed by SH: innerType changed to innerHTML else undefined shows in textbox in firefox
           s = s + ", "+ arrayOfCheckBoxLabels[i].innerHTML;


Here’s how it looks:

C#
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="MultiCheckCombo.ascx.cs" Inherits="SCAIR_SSRS_Report.MultiCheckCombo" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

<script type = "text/javascript">
    // Source: www.codeproject.com/Articles/66572/A-Multiple-Selection-DropDownList-a-CheckBoxList-I
    // Open Lisence: www.codeproject.com/info/cpol10.aspx
    // Source Code and Executable Files can be used in commercial applications;

function getClientID (tBox)
{
    document.getElementById('<%=txtVal.ClientID %>').value = tBox;
}
function CheckItem(checkBoxList)
{
    var options = checkBoxList.getElementsByTagName('input');
    var arrayOfCheckBoxLabels= checkBoxList.getElementsByTagName("label");
    var s = "";

    for(i=0;i<options.length;i++)
    {
        var opt = options[i];
        if(opt.checked)
        {
            // Changed by SH: innerType changed to innerHTML else undefined shows in textbox in firefox
            s = s + ", "+ arrayOfCheckBoxLabels[i].innerHTML;
        }
    }
    if(s.length > 0)
    {
       s = s.substring(2, s.length); //handling comma
    }
//    // Changed by SH
//    if (s.length == 0)
//    {
//        s = 'Selection...';
//    }

    // Added by SH
    // getting clientID of current textbox clicked

    var currentClientID = document.getElementById('<%=txtVal.ClientID %>').value;

    // Changed by SH
    //var TxtBox = document.getElementById("<%=txtCombo.ClientID%>");
    var TxtBox = document.getElementById(currentClientID);

    TxtBox.value = s;
    document.getElementById('<%=hidVal.ClientID %>').value = s;


}
</script>


<asp:TextBox ID="txtCombo" runat="server" ReadOnly="true" Width="200" Font-Size="X-Small" onclick="getClientID(this.id)"></asp:TextBox>
<cc1:PopupControlExtender ID="PopupControlExtender111" runat="server"
    TargetControlID="txtCombo" PopupControlID="Panel111" Position="Bottom" >
</cc1:PopupControlExtender>

<input type="hidden" name="hidVal" id="hidVal" runat="server" />

<input type="hidden" name="txtVal" id="txtVal" runat="server" />


<asp:Panel ID="Panel111" runat="server" ScrollBars="Vertical" Width="250" Height="150" BackColor="AliceBlue" BorderColor="Gray" BorderWidth="1">

    <asp:CheckBoxList ID="chkList"
        runat="server"
        Height="150" onclick="CheckItem(this)">
    </asp:CheckBoxList>

</asp:Panel>

http://sh-programmer-cornwall.blogspot.com
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 
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 
AnswerRe: Events for this conrol Pin
s.hashmi20-May-12 22:21
s.hashmi20-May-12 22:21 
GeneralLoad Error Pin
Megha0922-Jul-10 1:33
Megha0922-Jul-10 1:33 
Generalsome douts Pin
ravanth18-Mar-10 18:30
ravanth18-Mar-10 18:30 
Last Visit: 31-Dec-99 18:00     Last Update: 24-May-24 14:43Refreshᐊ Prev123 Next ᐅ

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.

Permalink
Advertise
Privacy
Cookies
Terms of Use
Layout: fixed | fluid

Posted 18 Mar 2010

Article Copyright 2010 by leoivix
Everything else Copyright © CodeProject, 1999-2024

Web01 2.8:2024-05-23:1