Click here to Skip to main content
14,574,744 members

ASP.NET Multiple Selection DropDownList with AJAX HoverMenuExtender

Rate this:
4.68 (13 votes)
Please Sign up or sign in to vote.
4.68 (13 votes)
3 Jan 2017CPOL
An article on how to build a multiple selection dropdownlist with the AJAX HoverMenuExtender.

Update 02/01/2017

select all
deselect all

In this release, I have added functionality to select all and deselect all items per member request. As usual, you can follow the demo link to see the control in action and download the source code. Comments are welcome.


Sample Image

Sample Image

Recently, I was looking for a multiple selection dropdownlist control for my new project. After spending some time researching for it, I decided to put together all my findings in one web user control. This web user control consists of an ASP.NET AJAX HoverMenuExtender, JavaScript, Stylesheet, and a CheckBoxListExCtrl. The final product will work with or without a masterpage, and you can drag and drop more than one instance of the control on to the page. This is not a perfect control, feel free to modify it to tailor your requirements, and share your thoughts. Below is a step by step tutorial on how I have accomplished this. Hope this tutorial will give someone an idea on how to use the ASP.NET AJAX HoverMenuExtender and create a multiple selection dropdownlist.

Before we begin, here is the structure of my project:

Sample Image

Using the Code

This is a user control, just drag and drop. But make sure to include the ScriptManager.

The project includes:

  • Default.aspx - this page does not use master page or user controls.
  • MS_With_UserControl.aspx - this page uses multiple instances of the user control and no master page.
  • MS_With_UserControl_and_Masterpage.aspx - this page uses multiple instances of the user control and a master page.
  • CheckBoxListExCtrl - How to get the CheckBoxList value using JavaScript?
  • The rest of the files are fairly self-explanatory.


The code is pretty much the same except I have made a few changes to return the text of the selected checkbox. Please see the comments.

//09042009 BT - var
string clientID = UniqueID + this.ClientIDSeparator + 

writer.WriteAttribute("type", "checkbox");
writer.WriteAttribute("name", UniqueID + this.IdSeparator + 
writer.WriteAttribute("id", clientID);
writer.WriteAttribute("value", Items[repeatIndex].Value);
if (Items[repeatIndex].Selected)
    writer.WriteAttribute("checked", "checked");
System.Web.UI.AttributeCollection attrs = Items[repeatIndex].Attributes;
foreach (string key in attrs.Keys)
    writer.WriteAttribute(key, attrs[key]);
writer.Write("/>"); //09042009 BT - close the input tag 
//09042009 BT - added label to hold the checkbox text
writer.Write("<label for="" + clientID + "">");
writer.Write(Items[repeatIndex].Text); //text
writer.Write("</label>"); //close label tag


Here is the contents of the JavaScript, please read the comments:

/*detect the browser version and name*/
var Browser = {
  Version: function() {
    var version = 999; // we assume a sane browser
    if (navigator.appVersion.indexOf("MSIE") != -1)
      // bah, IE again, lets downgrade version number
      version = parseFloat(navigator.appVersion.split("MSIE")[1]);
    return version;

function showIE6Tooltip(e){
    //we only want this to execute if ie6
    if (navigator.appName=='Microsoft Internet Explorer' && 
                  Browser.Version() == 6) {
        if(!e){var e = window.event;}
        var obj = e.srcElement;
        tempX = event.clientX + (document.documentElement.scrollLeft 
                              || document.body.scrollLeft);
        tempY = event.clientY + (document.documentElement.scrollTop 
                              || document.body.scrollTop);
        var tooltip = document.getElementById('ie6SelectTooltip');
        tooltip.innerHTML = obj.options.title; //set the title to the div
        //display the tooltip based on the mouse location = tempX; = tempY+10; = '100%'; = 'block';
    function hideIE6Tooltip(e){
       //we only want this to execute if ie6
       if (navigator.appName=='Microsoft Internet Explorer' && 
                               Browser.Version() == 6) {
          var tooltip = document.getElementById('ie6SelectTooltip');
          tooltip.innerHTML = '';
 = 'none';

    /* get and set the selected checkbox value and 
    text and selected index to a hidden field */
    function getCheckBoxListItemsChecked(elementId) {
    var elementRef = document.getElementById(elementId);
    var checkBoxArray = elementRef.getElementsByTagName('input');
    var checkedValues = '';
    var checkedText = '';
    var checkedSelIndex = '';
    var myCheckBox = new Array();

    for (var i = 0; i < checkBoxArray.length; i++) {
        var checkBoxRef = checkBoxArray[i];

        if (checkBoxRef.checked == true) {
        //selected index
            if (checkedSelIndex.length > 0)
                checkedSelIndex += ', ';
            checkedSelIndex +=i;     
            if (checkedValues.length > 0)
                checkedValues += ', ';

            checkedValues += checkBoxRef.value;

            var labelArray = checkBoxRef.parentNode.getElementsByTagName('label');

            if (labelArray.length > 0) {
                if (checkedText.length > 0)
                    checkedText += ', ';
                checkedText += labelArray[0].innerHTML;


    myCheckBox[0] = checkedText;
    myCheckBox[1] = checkedValues;
    myCheckBox[2] = checkedSelIndex;

    return myCheckBox;

function readCheckBoxList(chkBox, ddlList, hiddenFieldText, 
                          hiddenFieldValue, hiddenFieldSelIndex) {
    var checkedItems = getCheckBoxListItemsChecked(chkBox);

    $get(ddlList).options[0].innerHTML = checkedItems[1]; //set the dropdownlist value
    $get(ddlList).title = checkedItems[0]; //set the title for the dropdownlist
    //set hiddenfield value
    $get(hiddenFieldValue).value = checkedItems[1];
    $get(hiddenFieldText).value = checkedItems[0];
    $get(hiddenFieldSelIndex).value = checkedItems[2];


In this page, I have a HoverMenuExtender, DropDownList, CheckBoxListExCtrl, a few hidden fields, and a div to display tooltip information for IE 6.0. And, I have added some dummy data to my checkboxlist so it wouldn't look empty when I drag it onto the page.

    <cc2:HoverMenuExtender ID="HoverMenuExtender1"






                 PopDelay="25" HoverCssClass="popupHover">

   <asp:DropDownList ID="MultiSelectDDL" 

              CssClass="ddlMenu regularText" 

        <asp:ListItem Value="all">Select  
    <asp:Panel ID="PanelPopUp" 

             CssClass="popupMenu" runat="server">
     <cc1:CheckBoxListExCtrl ID="CheckBoxListExCtrl1" 

                 CssClass="regularText" runat="server">
        <asp:ListItem Value="d1">Dummy 1
            <asp:ListItem Value="d2">Dummy 2
            <asp:ListItem Value="d3">Dummy 3
            <asp:ListItem Value="d4">Dummy 4
            <asp:ListItem Value="d5">Dummy 5
            <asp:ListItem Value="d6">Dummy 6
            <asp:ListItem Value="d7">Dummy 7
            <asp:ListItem Value="d8">Dummy 8
     <asp:HiddenField ID="hf_checkBoxValue" runat="server" />
    <asp:HiddenField ID="hf_checkBoxText" runat="server" />
    <asp:HiddenField ID="hf_checkBoxSelIndex" runat="server" />
<div id="ie6SelectTooltip" 

           solid #333333;;background-color:#fffedf;font-size:smaller;z-index: 99;">


<asp:ScriptManager ID="ScriptManager1" runat="server">
<asp:Label ID="Label1" CssClass="regularText" 

          runat="server" Text="Month:" />
<uc1:MultipleSelection ID="MultipleSelection1" runat="server" />

MS_With_UserControl_and_Masterpage.aspx.cs - How to bind the data

DataTable dt = new DataTable();

DataColumn dcValue = new DataColumn("Value", typeof(string));
DataColumn dcText = new DataColumn("Text", typeof(string));


DataRow dr;
dr = dt.NewRow();
dr["Text"] = "January";
dr["Value"] = "m1";
//datasource, dataTextField, dataValueField
 MultipleSelection1.CreateCheckBox(dt, "Text", "Value");

How to set the selected value

MultipleSelection1.selectedIndex = "1,5,7";

How to get the SelectedIndex, SelectedValue, SelectedText


Points of interest

For some reason, I didn't load the ScriptManager dynamically. So, make sure you include a ScriptManager on the page before using the user control, or you will come across this error message: "The control with ID 'HoverMenuExtender1' requires a ScriptManager on the page. The ScriptManager must appear before any controls that needs it."

"Invalid postback or callback argument. Event validation is enabled using…". Initially, I was trying to modify the value of the dropdownlist through JavaScript, and I kept getting the error whenever I hit the Submit button. The easiest solution was to set EnableEventValidation = false on the page directive, but instead, I found another workaround by using a hidden field.

The tooltip (title) was displaying correctly in IE 7.0, 8.0, Firefox, and Google Chrome, but not in IE 6.0. In order to remedy the problem, I included a separate function to show and hide the tooltip.

I am using a checkboxlist control and having difficulty to get the checkboxlist value and text using JavaScript. After conducting some research, I came across a class library by Trilochan Nayak. I have modified his class so that I can retrieve the value and text of the selected checkbox through the JavaScript.



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


About the Author

Bryian Tan
Software Developer (Senior)
United States United States
I have over 10 years of experience working with Microsoft technologies. I have earned my Microsoft Certified Technology Specialist (MCTS) certification. I'm a highly motivated self-starter with an aptitude for learning new skills quickly.

Comments and Discussions

QuestionSelect Changed Event Pin
Ming-Jang6-Apr-17 0:57
MemberMing-Jang6-Apr-17 0:57 
AnswerRe: Select Changed Event Pin
Bryian Tan6-Apr-17 3:16
mveBryian Tan6-Apr-17 3:16 
GeneralRe: Select Changed Event Pin
Ming-Jang6-Apr-17 17:30
MemberMing-Jang6-Apr-17 17:30 
Questioni need select all option Pin
arifaliali23-Dec-16 3:10
Memberarifaliali23-Dec-16 3:10 
GeneralRe: i need select all option Pin
Bryian Tan28-Dec-16 3:54
mveBryian Tan28-Dec-16 3:54 
AnswerRe: i need select all option Pin
Bryian Tan1-Jan-17 18:34
mveBryian Tan1-Jan-17 18:34 
AnswerRe: i need select all option Pin
Bryian Tan2-Jan-17 18:28
mveBryian Tan2-Jan-17 18:28 
PraiseMultiSelect DropdownList Using jQuery in Asp.Net MVC and C#.Net Pin
Member 123685433-Mar-16 18:44
MemberMember 123685433-Mar-16 18:44 
Questionplease help me Ajax update panel in popup Exterend control use dropdownlist with checkbox Pin
Member 1229018717-Feb-16 23:22
MemberMember 1229018717-Feb-16 23:22 
QuestionImplement search functionality to Multi Select Dropdown Pin
Member 1047643528-Oct-15 22:55
professionalMember 1047643528-Oct-15 22:55 
QuestionGod Bless You Pin
redkid00410-Apr-14 2:31
Memberredkid00410-Apr-14 2:31 
QuestionHow to initialize the control from the code behind? Pin
Member 1063128521-Mar-14 8:59
MemberMember 1063128521-Mar-14 8:59 
GeneralRe: How to initialize the control from the code behind? Pin
Bryian Tan26-Mar-14 15:40
mveBryian Tan26-Mar-14 15:40 
QuestionAutopostback? Pin
Tenny23ca22-Nov-13 8:09
MemberTenny23ca22-Nov-13 8:09 
QuestionRe: Autopostback? Pin
biswa4719-Dec-13 5:55
Memberbiswa4719-Dec-13 5:55 
QuestionVB.NET Port Pin
KrispyKreme201212-Oct-12 12:30
MemberKrispyKreme201212-Oct-12 12:30 
AnswerRe: VB.NET Port Pin
Bryian Tan12-Oct-12 15:44
mveBryian Tan12-Oct-12 15:44 
Generalnice & cool Pin
shaheen_mix17-Dec-11 0:04
Membershaheen_mix17-Dec-11 0:04 
QuestionASP.NET Multi-Select DropDownList Pin
18-Jul-11 20:30
suss18-Jul-11 20:30 
GeneralUsing within a listview Pin
vincemiccio18-Feb-11 5:41
Membervincemiccio18-Feb-11 5:41 
Generalgood job Pin
Arlen Navasartian21-Jan-10 21:44
MemberArlen Navasartian21-Jan-10 21:44 
GeneralRe: good job Pin
Bryian Tan22-Jan-10 19:08
mveBryian Tan22-Jan-10 19:08 
QuestionHow to show text instead of values? Pin
vnfan6-Dec-09 13:27
Membervnfan6-Dec-09 13:27 
AnswerRe: How to show text instead of values? Pin
Bryian Tan9-Dec-09 3:25
mveBryian Tan9-Dec-09 3:25 
GeneralExcellent Pin
petersgyoung14-Sep-09 21:21
Memberpetersgyoung14-Sep-09 21:21 

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.

Posted 10 Sep 2009


37 bookmarked