Click here to Skip to main content
11,631,992 members (68,312 online)
Click here to Skip to main content

DropDown and MultiselectDropDown Controls for ASP.NET

, 6 May 2009 CPOL 42.2K 3.5K 49
Rate this:
Please Sign up or sign in to vote.
Custom DropDown and MultiselectDropDown controls with data binding support
dropdown-screen-0.PNG

Description

This article discusses about two user controls written in ASP.NET. Working on a project recently, I needed to develop a custom DropDown control with multiselect options in the form of CheckBox. I searched around for something simple, yet useful for my needs, and I wasn't able to find anything, so I developed my own control. Later, I reused the code to create a regular DropDown control (no multiselect checkbox options). The two controls can be merged into one, but I might do that at a later stage. On to the controls. 

DropDown

This control can be bound to a IListSource to fetch data to be populated, in addition to the regular Items collection that can be populated from the asp. Here are a few examples of how this control can be used in ASPX.

<%@ Register Src="Controls/DropDown.ascx" TagName="DropDown" TagPrefix="thp" %>

<thp:DropDown ID="DropDown1" runat="server" Width="200">
     <Items>
          <asp:ListItem Text="Some text" Value="0" Selected="True" />
          <asp:ListItem Text="Another option" Value="1" />
     </Items>
</thp:DropDown>
<thp:DropDown ID="DropDown2" runat="server" Width="200" DataSourceID="DataSource1"
            DataTextField="Name" DataValueField="Id" />
<thp:DropDown ID="DropDown3" runat="server" Width="200" 
	OnNeedDataSource="DropDown3_NeedDataSource"
         DataTextField="Name" DataValueField="Id" OnClientChange="onDropDownChange" />

Here's a screenshot of what the above code would render:

dropdown-screen-1.PNG

Both controls support the following data events:

  • ItemDataBound - Fired after the object has been bound to an Item. The argument passes both the bound object (DataObject) and the ListItem.
  • NeedDataSource - Fired when there's no DataSourceID specified. This event is helpful when you want to manually populate the controls with your data. See the source code provided for specifics on this, you can use either Items collection or create custom list source (or both).

MultiselectDropDown

The code and usage is exactly as the DropDown control. Here's a screenshot of all of the above scenarios:

multidropdown-screen-1.PNG

The styling in the attached project uses .skin files in the default theme. You can easily modify these to fit your needs. Everything can be styled.

I hope you find this code useful. I recommend this to anyone that wants to start developing custom controls as it has very important features implemented, such as the IPostBackDataHandler interface to pass data between postbacks in a custom manner. It also features some nice DataBinding examples and how you can use and modify these to perform specific tasks.

History

  • 6th May, 2009: Initial post

License

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

Share

About the Author

Tomislav Markovski
Web Developer
Macedonia, The Republic Of Macedonia, The Republic Of
No Biography provided

You may also be interested in...

Comments and Discussions

 
Suggestionhello,i want give some Suggestion Pin
hong liu7-Apr-15 21:19
memberhong liu7-Apr-15 21:19 
SuggestionThis control doesn't work if there is an async postback in Web page Pin
Pham Dinh Truong10-Jul-13 18:08
memberPham Dinh Truong10-Jul-13 18:08 
SuggestionJavaScript functions will be duplicated if initiating more than 2 MultiSelectDropDown controls Pin
Pham Dinh Truong10-Jul-13 8:00
memberPham Dinh Truong10-Jul-13 8:00 
GeneralMy vote of 5 Pin
Pham Dinh Truong10-Jul-13 0:39
memberPham Dinh Truong10-Jul-13 0:39 
Great control. Thank you for excellent works.
BugChrome Bug Pin
dinesh_22-Mar-13 18:02
memberdinesh_22-Mar-13 18:02 
AnswerRe: Chrome Bug Pin
Pham Dinh Truong10-Jul-13 7:46
memberPham Dinh Truong10-Jul-13 7:46 
BugTalk about Validation Pin
dinesh_5-Jan-13 18:39
memberdinesh_5-Jan-13 18:39 
Generalsearchable option for this Pin
raj chitty19-Jul-12 0:49
memberraj chitty19-Jul-12 0:49 
GeneralMy vote of 5 Pin
BALAKUMARAN198715-Jun-12 4:26
memberBALAKUMARAN198715-Jun-12 4:26 
QuestionCreate Control Dynamically Pin
Frank A M20-Apr-12 8:15
memberFrank A M20-Apr-12 8:15 
AnswerRe: Create Control Dynamically Pin
Frank A M1-May-12 10:42
memberFrank A M1-May-12 10:42 
QuestionHow to connect to sql datasource. Pin
vishalmetkar30-Sep-11 21:37
membervishalmetkar30-Sep-11 21:37 
QuestionBug Pin
ig88sir18-Jul-11 8:53
memberig88sir18-Jul-11 8:53 
AnswerRe: Bug Pin
Tomislav Markovski18-Jul-11 8:57
memberTomislav Markovski18-Jul-11 8:57 
GeneralRe: Bug Pin
ig88sir18-Jul-11 9:25
memberig88sir18-Jul-11 9:25 
GeneralAssign datatable to it Pin
ashu21882-May-11 16:32
memberashu21882-May-11 16:32 
GeneralRe: Assign datatable to it Pin
Tomislav Markovski2-May-11 21:14
memberTomislav Markovski2-May-11 21:14 
QuestionWant to change data at runtime? Pin
Mansi20109-Nov-10 0:05
memberMansi20109-Nov-10 0:05 
GeneralRequest Pin
abhinav86420-Oct-10 7:36
memberabhinav86420-Oct-10 7:36 
GeneralRe: Request Pin
ashu21882-May-11 16:43
memberashu21882-May-11 16:43 
GeneralJust what i needed Pin
Davevandeven5-Jan-10 1:46
memberDavevandeven5-Jan-10 1:46 
GeneralLooks great Pin
JeffCirceo11-May-09 16:17
memberJeffCirceo11-May-09 16:17 
Generalcool article Pin
Juraj Suchan6-May-09 6:56
memberJuraj Suchan6-May-09 6:56 
GeneralGreat idea. Pin
gstolarov6-May-09 6:01
membergstolarov6-May-09 6:01 
GeneralRe: Great idea. Pin
Tomislav Markovski6-May-09 22:29
memberTomislav Markovski6-May-09 22:29 

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 | Terms of Use | Mobile
Web01 | 2.8.150728.1 | Last Updated 6 May 2009
Article Copyright 2009 by Tomislav Markovski
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid