Click here to Skip to main content
Click here to Skip to main content

Custom ASP.NET DropdownList Control Using Chosen jQuery Plugin

, 16 Aug 2013 CPOL
Rate this:
Please Sign up or sign in to vote.
Custom ASP.NET DropdownList control using chosen jQuery plugin

Introduction

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 dropdown list, you will have to write your own JavaScript code or jQuery. This source code combines that work into an ASP.NET DLL control you can easily place on any ASP.NET web page.

The downloadable source project above uses the following technologies:

Example

Background

You do not need to have knowledge of jQuery, JavaScript, or CSS to use the DropDownListChosen. The only requirement is to drag and drop the DropDownListChosen control. The source code download contains the class library project for the DropDownListChosen and a test website using the DropDownListChosen control.

Using the Code

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

  1. Include a project reference to the DropDownChosen.dll to your ASP.NET webforms project.
    • You can skip steps 2 and 3 by using the DropDownListChosen 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 DropDownListChosen. Start by right clicking in the toolbox and select "Choose Items.." and then browse to where you have saved the DropDownChosen.dll.
    • Once added, you can now double click or click and drag the DropDownListChosen 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 DropDownListChosen at the top of your web page:
    <%@ Register Assembly="DropDownChosen" 
    Namespace="CustomDropDown" TagPrefix="cc1" %> 
  3. Add the script tags for the DropDownListChosen on your web page:
    <cc1:DropDownListChosen ID="DropDownListChosen1" runat="server" 
                NoResultsText="No results match." width="350px"            
                DataPlaceHolder="Type Here..." AllowSingleDeselect="true">                
            </cc1:DropDownListChosen> 
  4. Bind items to your dropdown list either manually by adding ListItems to the DropDownListChosen or by binding to a DataSource.
    Datasource example can be found in the downloadable source code above.

You're done! You can now work with your DropDownListChosen to find what options work best for you. I would love to hear some great feedback if you use this control on your site.

History

  • 13th July, 2013: Tip published
  • 7th August, 2013: Added DataPlaceHolder property and removed style sheet that causes design problems
  • 7th September, 2013: Added new properties AllowSingleDeselect and DisableSearchThreshold

License

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

Share

About the Author

Angel Blandón
Software Developer
Nicaragua Nicaragua
I am a ASP.Net Software Developer from Nicaragua.

Comments and Discussions

 
Questionhi Pinmemberchamila18-Sep-14 19:37 
QuestionError Javascript [modified] Pinmemberdianaemanuel15-Jul-14 1:27 
Questionthanks but after using this my other java script is not working.. pls help its urgent Pinmemberranoooooooooo8-Jul-14 20:52 
AnswerRe: thanks but after using this my other java script is not working.. pls help its urgent PinmemberAngel Blandón9-Jul-14 4:08 
QuestionThank You :) PinmemberMember 109337018-Jul-14 19:51 
QuestionHow to bind this drop down from sql database PinmemberHarishankar Maurya12-May-14 0:44 
AnswerRe: How to bind this drop down from sql database PinmemberAngel Blandón12-May-14 2:30 
AnswerMessage Automatically Removed PinmemberMember 1014497619-Feb-14 3:32 
QuestionSearch option is not working PinmemberNuthan Gowda23-Dec-13 19:02 
AnswerRe: Search option is not working PinmemberMoneer Tarabishi21-Oct-14 21:16 
GeneralRe: Search option is not working PinmemberAngel Blandón22-Oct-14 4:21 
GeneralRe: Search option is not working PinmemberMoneer Tarabishi12hrs 32mins ago 
QuestionMultiple controls on same page - making them unique? PinmemberEldorado22-Dec-13 8:39 
AnswerRe: Multiple controls on same page - making them unique? PinmemberAngel Blandón2-Dec-13 9:40 
QuestionCan we turn it to Multi Select ?? Pinmemberbenaref28-Nov-13 23:57 
AnswerRe: Can we turn it to Multi Select ?? PinmemberMember 1047980020-Dec-13 13:16 
GeneralRe: Can we turn it to Multi Select ?? Pinmember#teve27-Feb-14 9:41 
QuestionTHX Pinmemberbenaref18-Nov-13 21:34 
QuestionIssue in IE9 PinmemberEldorado221-Oct-13 7:33 
QuestionHow to override css? PinmemberEldorado28-Oct-13 9:39 
AnswerRe: How to override css? PinmemberAngel Blandón8-Oct-13 10:19 
GeneralRe: How to override css? PinmemberEldorado29-Oct-13 3:15 
QuestionNice but same problem as ajax combobox Pinmemberktkiebel17-Sep-13 16:28 
QuestionSearch option not displaying Pinmemberanuexuberant11-Sep-13 2:31 
AnswerRe: Search option not displaying PinmemberAngel Blandón11-Sep-13 5:42 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    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 | Mobile
Web04 | 2.8.141022.2 | Last Updated 16 Aug 2013
Article Copyright 2013 by Angel Blandón
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid