Click here to Skip to main content
14,449,862 members

MultiDropDown v2: A Multiple Selection Dropdown Control for ASP.NET

Rate this:
4.88 (37 votes)
Please Sign up or sign in to vote.
4.88 (37 votes)
8 Aug 2011CPOL
The MultiDropdown control allows selection of multiple items from a checkable list of dropdown items. The latest version allow searching items.


The stock DropDown control that comes with ASP.NET allows us to select only one item. To overcome this limitation, I wrote the MultiDropDown ASP.NET Server Control that allows selection of multiple items from a checkable list of items. This control supports multiple instances in the same web page. The best part about this control is you do not have to add any other external files (like images, style sheets or JavaScript files) to your project, the control does everything automatically behind the scenes.


  1. Supports multiple instances on the same page.
  2. Appearance of textbox, button, dropdown and tooltip can be customized.
  3. No external files like JavaScript or style sheets required. The control take care of everything.
  4. ASP.NET AJAX compliant. Works with UpdatePanel.
  5. Uses plain JavaScript. No JavaScript framework (like jQuery, mootools, etc.) required.
  6. Works with Internet Explorer, Firefox, Chrome, Opera and Safari. (Safari and Chrome do not seem to honor the dropdown's min-width property though).
  7. Just drag-n-drop to your page and start using the control.
  8. Allows searching items.


I had been looking for a control that allows me to select multiple items from a drop down, after searching the Internet in vain to find one, I decided to write my own ASP.NET server control that allows selection of multiple items. The result? The MultiDropDown control.

Using the MultiDropdown Control

The control consists of a textbox, an image button and a dropdown. The default appearance of the control is:


Clicking on the textbox or on the image button brings up the dropdown area.


When items are selected, the textbox is automatically updated to show the comma separated list of the selected items. The selected rows are also highlighted. You can select items by clicking anywhere on the item and not just the checkbox. You can also click the 'All' item to select/unselect all items in the dropdown. The control also has a built-in tooltip that automatically shows the selected items.

As you start typing in the Search box, the list is filtered to match all the items that start with the characters you type. Clicking on the Clear Search button clears the filter and display all items.


To use this control, add the MultiDropdown.dll to your Visual Studio toolbox and drag-n-drop the MultiDropdown control. You can also add a reference to the assembly and create the control directive yourself. The control directive looks like this:

<%@ Register Assembly="MultiDropDown" Namespace="MultiDropDownLib" 

	TagPrefix="MultiDropDownLib" %>

And the control instance looks like this:

<MultiDrodownLib:MultiDrodown ID="MultiDropdown1" runat="server"/> 

To add items to the control's dropdown, set its DataSource, DataTextField and DataValueField properties.

DataTable dt1 = new DataTable();
dt1.Columns.Add(new DataColumn("Name", typeof(System.String)));
dt1.Columns.Add(new DataColumn("ID", typeof(System.String)));

dt1.Rows.Add(new string[] { "Apple"     ,"1"  });
dt1.Rows.Add(new string[] { "Orange"    ,"2"  });
dt1.Rows.Add(new string[] { "Pear"      ,"3"  });
dt1.Rows.Add(new string[] { "Banana"    ,"4"  });
dt1.Rows.Add(new string[] { "Grapes"    ,"5"  });
dt1.Rows.Add(new string[] { "Strawberry","6"  });

MultiDropDown1.DataSource = dt1;
MultiDropdown1.DataTextField = "Name";
MultiDropdown1.DataValueField = "ID";

To get the list of selected items and selected values, use the SelectedItems, SelectedValues properties. The SelectedItems property is comma separated and the SelectedValues property is pipe separated.

string selectedItems = MultiDropdown1.SelectedItems;
string selectedValues = MultiDropdown1.SelectedValues;

Customizing the MultiDropDown Control

Almost every aspect of the control can be customized. Here's an instance of a customized control.











To show the dropdown just by hovering the mouse over the textbox, set the DropdownOnMouseOver property to true. This is turned off by default to avoid unnecessary intrusion of the dropdown on the page. The DropDownOnFocus property determines if the dropdown is shown when the textbox receives focus. This property is true by default.

The textbox can be customized by setting the TextBoxClass property to a custom CSS class.

	border: 1px solid maroon;

The button can be customized by setting the ImageButtonClass property to a custom CSS class in your web project. The image is rendered as a div element to enable images to be set with a CSS class. (The image element does not allow images to be set with a CSS class.) To change the image to a custom image, set the background-image property in your CSS class to the path of the desired image file path. Be sure to set the height and width properties also.


The dropdown can be customized by setting the DropdownClass property to a custom CSS class. However, when declaring a CSS class for the dropdown you have to declare separate classes for the td as well, like this:

	border: 2px solid maroon;

.dropdown1 td
	border: 1px dotted maroon;

The tooltip's appearance can be customized by setting the TooltipClass property to a custom CSS class.

.tooltip1 {
	padding:2px 12px 3px 7px;
	border:4px solid maroon; 

Here's an example of a customized MultiDropDown control:


Exploring the Source Code

The control is developed using Visual Studio 2010/.NET Framework 4.0. However, with little tweak it can be made to work with older versions of .NET. The project structure is like this:


The MultiDropDown.cs file contains the ASP.NET Server Control and it inherits from System.Web.UI.WebControls.WebControl. It also implements the marker interface System.Web.UI.INamingContainer to ensure that the ASP.NET runtime assigns unique names to the child controls based on the MultiDropDown Control's Id. This helps us to write code in such a way that multiple instances of the control can be placed in the same ASP.NET Page. The control consists of a HTML Textbox (HtmlInputText), an HTML image (HtmlImage), a div element for the dropdown area (HtmlGenericControl) and an ASP.NET GridView control for the dropdown items and an Html table (HtmlTable with associated HtmlTableRow and HtmlTableCell objects) to arrange the child controls. I decided to use the GridView control instead of an HTML table to ease databinding.

The child controls are composed inside the control's class, this automatically takes care of the child control's ViewState. The child controls are initialized in the overridden OnInit() method. The CreateChildControls() method is overridden to add the child controls to the server control's Controls collection and to do the actual databinding. The OnPreRender() method is overridden to inject the link tag for the stylesheet.

The JavaScript files, the Stylesheet and the default button images are embedded inside the control assembly as WebResources. This enables the control to serve embedded resources as resources over the web. You may wish to search CodeProject to learn how to use WebResources. I'll explain how the main JavaScript file is rendered as a <script> tag in the page.

Right-click the file and select 'Properties' from the context menu and set 'Build Action' property to 'Embed Resource' in the properties window. Next, open AssemblyInfo.cs file and add this line:

[assembly: System.Web.UI.WebResource("MultiDropDownLib.js.multidropdown.js", 

where MultiDropDownLib is the project name and /js is the folder structure and multidropdown.js is the actual file name. Make sure you specify the precise content type. You can then use the following code to inject the JavaScript file to the web page.


The rendered script tag will look something like this:

<script src="


The other JavaScript files and the default button image are rendered in similar way.

The stylesheet is rendered using a similar technique by saving the css fie as a WebResource. An HtmlLink control is created and added to the Page's header using this code:

 protected override void OnPreRender(EventArgs e) {
    HtmlLink linkCSS = new HtmlLink();
    linkCSS.Href = Page.ClientScript.GetWebResourceUrl(this.GetType(), 
    linkCSS.Attributes.Add("rel", "stylesheet");
    linkCSS.Attributes.Add("type", "text/css");

The GridView has three columns: A template column for the check box and two bound columns for the DataTextField and DataValueField properties.

  • The checkboxes in the first column (and the tr elements themselves) have an onclick event that checks/unchecks the row.
  • The second column holds the item's text and JavaScript uses this value to populated the textbox (txtNameList) with the comma separated list of items. The textbox's value is returned by the SelectedItems property.
  • The third column that holds the item's value is hidden. The JavaScript uses this column to populate the hidden control (hdnValueList) with selected values. This hidden control is used to return the list of selected values through the SelectedValues property.

Now coming to the JavaScripts, the main scripts to show/hide the dropdowns and check/uncheck items are in the multidropdown.js file. The functions ShowDropdown(), HideDropdown(), HideAllDropdowns(), SelectRow() (called from TR onclick), SelectItem() (called from Checkbox's onclick), SelectAll() do what their names suggest. A controlId parameter is passed to them that specifies the instance of the control they're supposed to work on. This enables us to place more than one instance of the control on the same ASP.NET page. The Initialize() function re-selects the selected items to restore state after a full postback or an AJAX partial postback. This function is called by code in the mddinitialize.js file. The full postback is handled by attaching the Initialize() function to window.onload event. The partial postback is handled by the predefined pageLoad(sender, args) function. The mddtooltip.js file contains the tooltip class.

Points of Interest

A single instance of the tooltip class is reused to show tooltip for all the controls on a web page. This saves us some memory and system resources and keeps the DOM footprint smaller. You may be wondering why I did not have just one instance of the dropdown and reuse it across all controls in the page, the reason is that the tooltip class is simple, you just need to change the text and the CSS class to make it work with multiple instances, whereas the dropdown portion encapsulates a complete table and it is quite difficult to make it work with multiple instances. However, this is something that could be done in future, so I am adding this to the wishlist for the time being.


Features that could be implemented in future:

  1. Multi-column dropdown (e.g. Names of people with their address)
  2. Design-time support
  3. Dynamic resizing of the dropdown area using mouse
  4. Customize everything about the control (including dropdown background color, selected row color, etc.)
  5. A 'Debug' mode that displays the Value column in the dropdown and the values in the tooltip to enable troubleshooting in cases where the control does not behave as expected.
  6. One dropdown for all instances of the control in a web page. (Similar to tooltip class)

I hope you will enjoy using this control as much as I enjoyed developing it. Feel free to explore the source code and make changes as you wish. If you make any significant changes to the control, I would love to hear from you about the changes you made.

If you like this control and this article, then please vote for this article, you can find the vote button just below the author profile. Please send in your comments, suggestions, likes, dislikes or whatever; I want to hear from you.


Version 1.0

  • The initial version

Version 2.0

  1. Search feature
  2. Minor bug fixes


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


About the Author

Comments and Discussions

QuestionHow can i remove Search option in Version 2 ? Pin
bkthebest9-Feb-18 8:14
Memberbkthebest9-Feb-18 8:14 
QuestionHow can this control be used dataset instead of Datatable? Pin
Member 1365002931-Jan-18 2:15
MemberMember 1365002931-Jan-18 2:15 
QuestionMultiple Selection Dropdown Control is working fine sir..but i am unable to set autopostback property for this multiple dropdown Pin
rajuspark26@gmail.com31-Mar-16 1:33
Memberrajuspark26@gmail.com31-Mar-16 1:33 
QuestionMultiple Slection Dropdown control Pin
Member 1225514425-Mar-16 21:28
MemberMember 1225514425-Mar-16 21:28 
QuestionFelicitaciones Pin
Member 110731853-Mar-16 8:49
MemberMember 110731853-Mar-16 8:49 
QuestionBinding to a SqlDataSource Pin
Member 97427938-Jan-16 5:51
MemberMember 97427938-Jan-16 5:51 
Questionwant to clear selected items of Multidropdown on Clear button?? Pin
jaywant150318-Nov-15 22:20
Memberjaywant150318-Nov-15 22:20 
QuestionScroll Bar Pin
brandon aho21-Sep-15 9:19
Memberbrandon aho21-Sep-15 9:19 
QuestionFill MultiDropDown on Button Click Pin
bhavsar.rohan24-Aug-15 21:53
Memberbhavsar.rohan24-Aug-15 21:53 
QuestionCould you provide an example, please? I'm trying to bind all selected values on page load to this drop down Pin
Vikram Singh Rathaur15-Jun-15 21:31
MemberVikram Singh Rathaur15-Jun-15 21:31 
Questioncannot filter two dropdownlist only in chrome browser Pin
Member 1153689514-May-15 13:42
MemberMember 1153689514-May-15 13:42 
Dear Shameel

Requesting if you could help me.

I have created two dropdownlist it is working fine in firefox & internet explorer but i cannot filter the deparmtents in chrome.

since my code is working fine, but what could be possible solution for chrome.

here is my code:

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

public partial class admin_addVacancy : System.Web.UI.Page
    private Dictionary<String, ListItem[]> departmentData;
    protected void Page_Load(object sender, EventArgs e)

        if (!IsPostBack)
            TextBoxOpeningDate.Text = DateTime.Today.ToShortDateString();
            TextBoxClosingDate.Text = DateTime.Today.AddDays(14).ToShortDateString();
            foreach (String college in departmentData.Keys)
                DropDownListCollege.Items.Add(new ListItem(college));
            DropDownListDepartment.Items.AddRange(departmentData["Office of the Vice Chancellor"]);

    protected override void OnInit(EventArgs e)
        string scriptChrome = "if (Sys.Extended && Sys.Extended.UI && Sys.Extended.UI.HtmlEditorExtenderBehavior && Sys.Extended.UI.HtmlEditorExtenderBehavior.prototype && Sys.Extended.UI.HtmlEditorExtenderBehavior.prototype._editableDiv_submit) {"
                + "Sys.Extended.UI.HtmlEditorExtenderBehavior.prototype._editableDiv_submit = function () {"
                + "var char = 3;var sel = null;"
                + " setTimeout(function () {"
                + "     if (this._editableDiv != null)"
                + "         this._editableDiv.focus();"
                + " }, 0);"
                + " if (Sys.Browser.agent != Sys.Browser.Firefox) {"
                + "     if (document.selection) {"
                + "         sel = document.selection.createRange();"
                + "         sel.moveStart('character', char);"
                + ";"
                + "     }"
                + "     else {"
                + "         if (this._editableDiv.firstChild != null && this._editableDiv.firstChild != undefined) {"
                + "             sel = window.getSelection();"
                + "             sel.collapse(this._editableDiv.firstChild, char);"
                + "         }}}"
                + " this._textbox._element.value = this._encodeHtml();"
                + "}}";

        ScriptManager.RegisterStartupScript(this, GetType(),"TestChrome", scriptChrome, true);

        departmentData = new Dictionary<String, ListItem[]>();
        departmentData["Office of the Vice Chancellor"] = new ListItem[]
            new ListItem("Department of Communication"),
            new ListItem("Department of Uni Services"),
            new ListItem("Department of Securities"),
            new ListItem("Department of the Vice Chancellor"),
            new ListItem("Department of Administration"),
            new ListItem("Department of Secretariat"),
            new ListItem("Centre for Aplied Eco Research"),
            new ListItem("Department of Audit "),
            new ListItem("Department of Research"),
            new ListItem("Department of TVET")

        departmentData["Division of Human Resources"] = new ListItem[]
            new ListItem("Department of Administration"),
            new ListItem("Department of People Capabilities"),
            new ListItem("Department of People Personnel Serv"),
            new ListItem("Department of People Relations"),
            new ListItem("Department of People Sourcing"),
            new ListItem("Department of HR Welfare"),
            new ListItem("Department of Human Resources")


        departmentData["College of Agriculture, Forest & Fisheries"] = new ListItem[]
            new ListItem("Department of Administration"),
            new ListItem("Department of  Fisheries Studies"),
            new ListItem("Department of Animal science"),
            new ListItem("Department of Forestry"),
            new ListItem("Department of Agriculture"),
            new ListItem("Department of Hoticulture"),
            new ListItem("Department for Sustainable Tech & Dev")


        departmentData["College of Engineering, Science & Technology"] = new ListItem[]
            new ListItem("Department of Administration"),
            new ListItem("School of Electrical & Electronic Engineering"),
            new ListItem("School of Building & Civil Engineering"),
            new ListItem("Department of Mechanical Engineering"),
            new ListItem("School of Pure & Applied Sciences"),
            new ListItem("School of Maritime Studies"),
            new ListItem("Department of Biology"),
            new ListItem("Department of National Trade Test"),
            new ListItem("Department of Chemistry"),
            new ListItem("Department of Computer Science & IS"),
            new ListItem("Department of Avionics"),
            new ListItem("Department of Maths"),
            new ListItem("Department of Environmental Science"),
            new ListItem("Department of Physics"),
            new ListItem("Department of Printing Technology"),
            new ListItem("Department of Meteorology"),
            new ListItem("Department of Home Economics"),
            new ListItem("Department of Food Science"),
            new ListItem("Department of National Qualn Framewk"),
            new ListItem("Department of Industrial Lab Tech"),
            new ListItem("Department of Manpower Research"),
            new ListItem("Department of ISO Certification")


        departmentData["College of Medicine, Nursing & Health Sciences"] = new ListItem[]
            new ListItem("Department of Administration"),
            new ListItem("Department of Health Sciences"),
            new ListItem("Department of Public health"),
            new ListItem("Department of Medical science "),
            new ListItem("Department of Oral health"),
            new ListItem("Department of Research"),
            new ListItem("Deans office"),
            new ListItem("School of Nursing "),
            new ListItem("Department of Under Grad Nursing")


        departmentData["College of Humanities & Education"] = new ListItem[]
            new ListItem("Department of Administration"),
            new ListItem("Department of Tertiary Education"),
            new ListItem("Department of History"),
            new ListItem("Department of Community Education"),
            new ListItem("Department of Hair Dressing"),
            new ListItem("Department of Secondary Education"),
            new ListItem("School of Literature & Language "),
            new ListItem("School of Communication & Creative arts"),
            new ListItem("Department of Media & Journalism"),
            new ListItem("Department of Ethics & Governance"),
            new ListItem("Department of Primary Education"),
            new ListItem("Department of Music,Visual & P.Arts"),
            new ListItem("Department of Early Childhood Education"),
            new ListItem("Department of Child Care & Aged Care"),
            new ListItem("Department of Sports Education"),
            new ListItem("Department of Film & TV")


        departmentData["College of Business, Hospitalty & Tourism Studies"] = new ListItem[]
            new ListItem("Department of Administration"),
            new ListItem("Department of Economics & Finance "),
            new ListItem("Department of Computer Science & Information System"),
            new ListItem("Department of Office administration"),
            new ListItem("Department of Economics, banking & Finance"),
            new ListItem("Department of Food & Beverage"),
            new ListItem("Department of Management, IR & OHS"),
            new ListItem("School of Hospitality & Tourism Studies"),
            new ListItem("School of Accounting & Law"),
            new ListItem("Department of Accomodation & Front Office")


        departmentData["Office of the Registrar"] = new ListItem[]
            new ListItem("Department of Administration"),
            new ListItem("Department of Academic Services"),
            new ListItem("Department of Library Services"),
            new ListItem("Department of Secretariat"),
            new ListItem("Department of Administration"),
            new ListItem("Department of Student Services")

        departmentData["Division of Finance"] = new ListItem[]
            new ListItem("Department of Management Accounting"),
            new ListItem("Department of Financial Accounting "),
            new ListItem("Department of Debt & Revenue Management"),
            new ListItem("Department of Levy & Grants Management"),
            new ListItem("Department of Uni Services"),
            new ListItem("Department of Uni Services - Ancillary Units"),
            new ListItem("Department of Uni Services - Bookshop"),
            new ListItem("Department of Uni Services - Hostels"),
            new ListItem("Department of Financial Services"),
            new ListItem("Department of Administration")

            //new ListItem("Business Development Unit")//,
            //new ListItem("Department of Secretariat"),

        departmentData["NTPC"] = new ListItem[]
            new ListItem("Department of Administration"),
            new ListItem("Department of Quality Awards"),
            new ListItem("Department of Fashion & Design"),
            new ListItem("Department of Mechanical Engineering"),
            new ListItem("Department of Hospitality & Tourism Management"),
            new ListItem("Department of Manufacturing & Industry"),
            new ListItem("Department of National Apprenticeship"),
            new ListItem("Department of IT"),
            new ListItem("Department of Productivity Quality"),
            new ListItem("Department of APTC"),
            new ListItem("Department of Marine Ports Training"),
            new ListItem("Department of EEEITD"),
            new ListItem("Dept of TVET")

        departmentData["Division of ICT"] = new ListItem[]
            new ListItem("Department of ICT Infrastructure"),
            new ListItem("Department of MIS & Operations"),
            new ListItem("Department of Administration")
            //new ListItem("Department of Fashion & Design")//,
            //new ListItem("Department of Hospitality & Tourism")

        departmentData["Division of Properties & Facilities"] = new ListItem[]
            new ListItem("Department of Buildings & Services"),
            new ListItem("Department of Administration")
            //new ListItem("Department of Fashion & Design")//,
            //new ListItem("Department of Hospitality & Tourism")

        departmentData["Division of Planning and Development"] = new ListItem[]
            new ListItem("Department of Administration"),
            new ListItem("Quality Office"),
            new ListItem("Institutional Research and Planning Office")
            //new ListItem("Department of Administration")
        /*departmentData["Division of Uniservices - Ancillary Unit"] = new ListItem[]
            new ListItem("Bookshop"),
            new ListItem("Uni-Lodges"),
            new ListItem("Uni-Cabs (Fleet)"),
            new ListItem("Security")


GeneralMy vote of 5 Pin
shyamtiwari4-Mar-15 2:53
Membershyamtiwari4-Mar-15 2:53 
GeneralMy vote of 1 Pin
Teets4-Nov-14 9:51
MemberTeets4-Nov-14 9:51 
QuestionUsing as Gridview Column Pin
KuldipMS27-Oct-14 0:26
MemberKuldipMS27-Oct-14 0:26 
QuestionNeed help pre-checking options on page load Pin
Member 1063128514-Mar-14 13:56
MemberMember 1063128514-Mar-14 13:56 
AnswerRe: Need help pre-checking options on page load Pin
Member 141338524-Feb-19 13:09
MemberMember 141338524-Feb-19 13:09 
QuestionHmmm.. Plagiarism? Pin
Dalek Dave23-Jan-14 1:36
professionalDalek Dave23-Jan-14 1:36 
AnswerRe: Hmmm.. Plagiarism? Pin
StM0n23-Jan-14 3:15
MemberStM0n23-Jan-14 3:15 
AnswerRe: Hmmm.. Plagiarism? Pin
Shameel23-Jan-14 3:42
professionalShameel23-Jan-14 3:42 
QuestionHow to set drop down selected value? Pin
Friends128-Jan-14 3:09
MemberFriends128-Jan-14 3:09 
AnswerRe: How to set drop down selected value? Pin
Member 1063128513-Mar-14 14:27
MemberMember 1063128513-Mar-14 14:27 
QuestionSelections dissapear on paging Pin
sirivinu16-Oct-13 7:59
Membersirivinu16-Oct-13 7:59 
QuestionDropdown not Binding outside of PageLoad event? Pin
kaempf843-Oct-13 11:16
Memberkaempf843-Oct-13 11:16 
QuestionHelp ~ The selections disappear when mouse-over Pin
KarateJB30-Sep-13 0:28
MemberKarateJB30-Sep-13 0:28 
AnswerRe: Help ~ The selections disappear when mouse-over Pin
KarateJB1-Oct-13 0:47
MemberKarateJB1-Oct-13 0:47 

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 3 Jul 2011


76 bookmarked