Click here to Skip to main content
11,923,517 members (70,552 online)
Click here to Skip to main content
Add your own
alternative version


127 bookmarked

Custom ASP.NET Editable DropDownList

, 15 Jan 2013 CPOL
Rate this:
Please Sign up or sign in to vote.
A custom made DropDownList control for ASP.NET


The ASP.NET DropDownList is an easy way to offer a set of selections for the user. However, if you want to allow the user to enter information not available in the drop down list, you will have to write your own JavaScript code or jQuery. This source code combines that work into a ASP.NET DLL control you can easily place on any ASP.NET web page.

The downloadable source project above uses the following technologies:

  • ASP.NET 4.0 / Webforms
  • C#
  • jQuery / JavaScript
  • CSS




You do not have to have knowledge with jQuery, JavaScript, or CSS to use the EditableDropDownList. The only requirement is that any page that references the EditableDropDownList also contains the proper links to the CSS and JavaScript files available in either of the downloadable files above. The source code download contains the class library project for the EditableDropDownList and a test website using the EditableDropDownList control.

Using the Code

To use the EditableDropDownList, you will need to follow these steps:

  1. Include a project reference to the EditableDropDownList.dll to your ASP.NET webforms project.
    • You can skip steps 2 and 5 by using the EditableDropDownList from your Visual Studio toolbox.
    • To do so, be sure that you are currently editing a web page so that you can get access to the toolbox and ASP.NET controls.
    • From your Visual Studio toolbox, right click to create a new tab or use an existing one to add the EditableDropDownListControl. Start by right clicking in the toolbox and select "Choose Items.." and then browse to where you have saved the EditableDropDownList.dll.
    • Once added, you can now double click or click and drag the EditableDropDownList to your web page to get started. This will automatically add the reference to your web project, place the proper code in the header of your web page, and add the control into your web page.
  2. Register the EditableDropDownList at the top of your web page.
    <%@ Register Assembly="EditableDropDownList" 
    Namespace="EditableControls" TagPrefix="editable" %> 
  3. Add these files to your website:
    • jquery-ui.css
    • img/ui-bg_flat_0_aaaaaa_40x100.png
    • img/ui-icons_222222_256x240.png
    • img/ui-icons_454545_256x240.png
    • img/ui-icons_888888_256x240.png
    • (Javascript files below should be referenced in this order below)
    • jquery-1.6.4.min.js (* or greater)
    • jquery.ui.core.js
    • jquery.ui.widget.js
    • jquery.ui.button.js
    • jquery.ui.position.js
    • jquery.ui.autocomplete.js
    • jquery.ui.combobox.js (This file is not a part of the jQuery library)
  4. Add the references to the CSS and JavaScript files in the page header:
    <head runat="server">
        <link href="css/jquery-ui.css" rel="stylesheet" type="text/css" />
        <script src="js/jquery-1.6.4.min.js" type="text/javascript"></script>
        <script src="js/jquery.ui.core.js" type="text/javascript"></script>
        <script src="js/jquery.ui.widget.js" type="text/javascript"></script>
        <script src="js/jquery.ui.button.js" type="text/javascript"></script>
        <script src="js/jquery.ui.position.js" type="text/javascript"></script>
        <script src="js/jquery.ui.autocomplete.js" type="text/javascript"></script> 
        <script src="js/jquery.ui.combobox.js" type="text/javascript"></script> 
  5. Add the script tags for the EditableDropDownList on your web page:
    <editable:EditableDropDownList ID="EditableDropDownList1" runat="server"> 
  6. Bind items to your drop down list either manually by adding ListItems to the EditableDropDownList or by binding to a DataSource.
    • Both examples can be found in the downloadable source code above.
  7. You're done! You can now work with your EditableDropDownList to find what options work best for you. I would love to hear some great feedback if you use this control on your site.

How is the EditableDropDownList Different from the Normal .NET DropDownList?

Here are the primary differences from the ASP.NET DropDownList control:

  • OnClick event is new.
    • You can now capture the event that a user clicked or selected an item. Capturing this event will cause an automatic page postback after the user makes a selection.
  • AutoWidth to fit the contents of the list items.
    • This functionality is a part of the browser and the <select> element. We are not using a select element for this control so it will be up to you to give a width that works well for the data that you are providing to the user.
  • Sorted [New/Added] (Boolean)
    • A new property "Sorted" has been added to allow you to automatically sort your items for you.
  • Duplicate entries will be ignored. If you have multiple entries provided in your drop down list, then only a single entry will be listed.
  • Blank dropdown list entries are not allowed. If you would like to provide a blank entry for the user to select, then I would suggest that you use "&nbsp;" as your display value.
  • If no dropdown list items are given or Enabled="false", then a simple text box will be displayed.
  • There may be some other properties that are available in the ASP.NET DropDownList like "DataTextFormatString" that will not work with the EditableDropDownList. If you would like to add this or any other functionality, you are welcome to modify the source code as needed.
  • The maximum dropdown height is set in the CSS file "css/jquery-ui.css" to 300px.
    • This will cause a scroll bar to always be visible but it will also prevent the drop down list from getting to big.
    • To turn this feature off, you will need to remove or comment out the line setting the max-height or you can adjust the maximum height.


If you would like to modify the look and feel of the EditableDropDownList, there are several ways of doing this:

  • Use CSS classes and set the CssClass property accordingly. (Be sure that the reference to your CSS file in the header is after the reference to the file "jquery-ui.css")
  • Set styles through the code behind of the page as you would with any ASP.NET control. (Example: EditableDropDownList1.Style.Add(HtmlTextWriterStyle.BackgroundColor, "#fefecc");)
  • Modify the jQuery CSS file "jquery-ui.css".
    • If you want to maintain a consistent look and feel throughout your website and everywhere that you use the EditableDropDownList, then this will be your best option.
    • Keep in mind that if you are using other jQuery UI controls, then changes will affect those controls as well.


  • 25th November, 2011: Article published
  • 15th January, 2012: Updated the EditableDropDownList control so that it will now work properly when used in a MasterPage
  • 25th February, 2012: Updated the EditableDropDownList control:
    • So that it will now work properly when used in a UpdatePanel
    • Allow AutoPostBack to be set to True
    • Added OnClick event
    • Added max-height the CSS file "css/jquery-ui.css" 
  • 18th June, 2012: Updated the  EditableDropDownList control: 
    • The original text input ID is set to the ClientID, the autocomplete text input ID is set to the ClientID + '_list', and the button is set to ClientID + '_list_button' so that these controls can be accessed in javascript.   
  • 19th July, 2012: Fixed a bug where the TextChanged and SelectedIndexChanged had stopped working properly due to the previous update. 
  • 12th November 2012: Moved the SelectedIndexChanged event to be raised just before the control's PreRender event so that all other controls on the page will have their data loaded and ready in-case they are needed. 
  • 19th November 2012: Fixed the following items. 
    • If the EditableDropDownList is disabled it will not lose it's text on postback.
    • TabIndex can be set.
    • If you call the Focus() method then jquery will be used to set focus on this control. 
  • 23rd November 2012: Added option to autoselect the first item of the dropdown list.
    • New boolean property name AutoselectFirstItem.
  • 19th December 2012: The drop down list will use the same font-family as its text box.
    • Added the style 'white-space: pre-wrap' to the dropdown list to allow for formatting with spaces.

Happy coding!  


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


About the Author

Web Developer National Research Corporation
United States United States
Began writing software at the age of 10.
Graduated from the University of Houston in 1995 with a BS in Computer Science and a minor in Math.
I love developing great software and websites.
I recently moved to Seattle and I'm currently working for a Health Care Analytics company.

Hobbies include Basketball and Soccer and very happily married to a wonderful wife.

You may also be interested in...

Comments and Discussions

Questionconfilit Pin
msm8-Nov-15 6:45
membermsm8-Nov-15 6:45 
QuestionHow to make this is compatible with bootstrap. Pin
resac30-Oct-15 18:56
memberresac30-Oct-15 18:56 
QuestionGetting Selected Value Pin
Madhu Nair8-Jul-15 4:18
memberMadhu Nair8-Jul-15 4:18 
QuestionChallenge Pin
Member 1168997514-May-15 5:06
memberMember 1168997514-May-15 5:06 
QuestionUnknown server tag 'editable:EditableDropDownList'. Pin
Member 1147040026-Mar-15 5:56
memberMember 1147040026-Mar-15 5:56 
Questionappears asa textbox Pin
Member 1112014725-Feb-15 23:53
memberMember 1112014725-Feb-15 23:53 
GeneralMy vote of 3 Pin
Member 113195215-Feb-15 17:57
memberMember 113195215-Feb-15 17:57 
Questionjavascript Pin
arishttha16-Dec-14 0:15
memberarishttha16-Dec-14 0:15 
QuestionNot working in IE8 Pin
huicho4-Dec-14 7:14
memberhuicho4-Dec-14 7:14 
QuestionHow To Get Selection In Editable Drop Down List Align Left? Pin
Don Dang26-Nov-14 17:23
memberDon Dang26-Nov-14 17:23 
QuestionGood job! Pin
huicho26-Nov-14 12:13
memberhuicho26-Nov-14 12:13 
QuestionHow to get SelectedValue in Javascript on change event. Pin
Sushil Kumar Purohit12-Nov-14 23:29
memberSushil Kumar Purohit12-Nov-14 23:29 
QuestionEditable dropdown Not populating javascript array values. Pin
Member 104424626-Oct-14 9:40
memberMember 104424626-Oct-14 9:40 
QuestionDrop down not working inside grid view brings always selected index=0 so it does not fire the selected index change is there any solution for that ... Pin
rajmohan13115-Jun-14 3:34
memberrajmohan13115-Jun-14 3:34 
QuestionHow do I use the dropdownlist with a Master page? Pin
Member 90973577-May-14 10:05
memberMember 90973577-May-14 10:05 
AnswerRe: How do I use the dropdownlist with a Master page? Pin
rajmohan13115-Jun-14 3:37
memberrajmohan13115-Jun-14 3:37 
Questionhow to change the EditableDropDownList control height Pin
melodyfriend16-Apr-14 22:26
membermelodyfriend16-Apr-14 22:26 
AnswerRe: how to change the EditableDropDownList control height Pin
rajmohan13115-Jun-14 3:39
memberrajmohan13115-Jun-14 3:39 
QuestionAutoPostBack not working Pin
Member 80670969-Apr-14 12:11
memberMember 80670969-Apr-14 12:11 
QuestionGetting error in adding EditableDropDownList.dll to Visual Studio 2008 toolbox Pin
Member 1054766424-Jan-14 12:13
memberMember 1054766424-Jan-14 12:13 
QuestionRe: Getting error in adding EditableDropDownList.dll to Visual Studio 2008 toolbox Pin
Knave4627-Jan-14 5:44
memberKnave4627-Jan-14 5:44 
Suggestionimplementation of JavascriptArray with Value and Label of DropDownList Pin
MPaga8721-Jan-14 3:08
memberMPaga8721-Jan-14 3:08 
QuestionNot Working in IE 11.0 Pin
jshrilekha12-Jan-14 18:40
memberjshrilekha12-Jan-14 18:40 
QuestionComboBox not working in Gridview Pin
Er.D.K.Malhotra10-Jan-14 10:08
memberEr.D.K.Malhotra10-Jan-14 10:08 
Questioneditable dropdown list Pin
hemalgshah24-Oct-13 23:22
memberhemalgshah24-Oct-13 23:22 
QuestionWhy the control didn't handle more than 20 items ? Pin
Mohammad A. Amer17-Sep-13 23:25
memberMohammad A. Amer17-Sep-13 23:25 
QuestionCannot access correct data from EditableDropDown inside Gridview Pin
rscrbv22-Aug-13 23:17
memberrscrbv22-Aug-13 23:17 
AnswerError 'jquery-1.6.4.min.js' @ lines 2 and 3 Pin
Member 1016185818-Jul-13 5:19
memberMember 1016185818-Jul-13 5:19 
GeneralRe: Error 'jquery-1.6.4.min.js' @ lines 2 and 3 Pin
shrutighosh22-Aug-13 19:18
membershrutighosh22-Aug-13 19:18 
QuestionObject doesn't support property or method 'apply' (???) Pin
Tina Riley15-Jul-13 8:33
memberTina Riley15-Jul-13 8:33 
QuestionFreeze when populate a lot of data Pin
arbh8911-Jul-13 7:51
memberarbh8911-Jul-13 7:51 
QuestionError Pin
Member 900653419-Jun-13 1:32
memberMember 900653419-Jun-13 1:32 
QuestionHandling a newly inserted item Pin
Balakrishnans24-May-13 2:20
memberBalakrishnans24-May-13 2:20 
QuestionSelectedIndex property not available in javascript Pin
SantoshiChavan6-May-13 23:08
memberSantoshiChavan6-May-13 23:08 
QuestionRangeValidator and the control cant be in the same page Pin
Member 992999117-Apr-13 22:05
memberMember 992999117-Apr-13 22:05 
QuestionTextChanged event Pin
Member 795726510-Apr-13 12:26
memberMember 795726510-Apr-13 12:26 
AnswerRe: TextChanged event Pin
anotheruserm24-Sep-13 6:30
memberanotheruserm24-Sep-13 6:30 
QuestionHow to disable ans enable this Editable dropdown control using javascript Pin
shashikumarpathi8-Apr-13 19:30
membershashikumarpathi8-Apr-13 19:30 
QuestionDynamic Databound doesnt work, Pls help Pin
jshrilekha2-Apr-13 21:24
memberjshrilekha2-Apr-13 21:24 
AnswerRe: Dynamic Databound doesnt work, Pls help Pin
jankokv4-Apr-13 6:17
memberjankokv4-Apr-13 6:17 
QuestionAuto open dropdown Pin
phlat15-Mar-13 12:27
memberphlat15-Mar-13 12:27 
GeneralMy vote of 4 Pin
abhi99314-Mar-13 8:10
memberabhi99314-Mar-13 8:10 
Questionstyle for dropdownlist part of editabledropdownlist Pin
pra44445-Mar-13 13:00
memberpra44445-Mar-13 13:00 
QuestionCustom ASP.NET Editable DropDownList not passing value in javascript Pin
ItagiGuru27-Feb-13 20:41
memberItagiGuru27-Feb-13 20:41 
SuggestionDown load Pin
saguntamrakar17-Feb-13 18:38
membersaguntamrakar17-Feb-13 18:38 
QuestionProblem with drop down list post back in updatepanel Pin
Vitali Unke1-Feb-13 8:28
memberVitali Unke1-Feb-13 8:28 
QuestionHow to setting the style of list box of editabledropdownlist. Pin
s843210520-Jan-13 17:16
members843210520-Jan-13 17:16 
AnswerRe: How to setting the style of list box of editabledropdownlist. Pin
EricFaust23-Jan-13 22:33
memberEricFaust23-Jan-13 22:33 
GeneralRe: How to setting the style of list box of editabledropdownlist. Pin
s843210523-Jan-13 23:11
members843210523-Jan-13 23:11 
GeneralRe: How to setting the style of list box of editabledropdownlist. Pin
kuldeep@1234515-Mar-13 1:54
memberkuldeep@1234515-Mar-13 1:54 

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.

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.151125.3 | Last Updated 16 Jan 2013
Article Copyright 2011 by EricFaust
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid