Click here to Skip to main content
Click here to Skip to main content
Go to top

Dropdown TextBox

, 31 Jan 2012
Rate this:
Please Sign up or sign in to vote.
Custom TextBox with a dropdown list

Introduction

If you are a .Net developer, you may notice that there is an important difference (in terms of features) between the WinForm ComboBox and the WebForm DropDownList. ComboBox of WinForm allows user to input custom item if the user cannot find the item in the combo list. However, this feature is omitted in the DropDownList of WebForm. In order to make WebForm DropDownList as flexible as WinForm ComboBox, I decide to build a DropdownTextBox for WebForm with the feature similar to the WinForm ComboBox.

Using the code

You can download the zip file above and use it immediately. The zip file contains a demo web page and source code. As the code is quite straight forward, I do not want to write a lengthy explanation here. If you want to see a live demo before you download it, you can go to my other blog.

Essentially, the DropdownTextBox is built from the combination of a TextBox, a ListBox and a PopupControlExtender of the AjaxControlToolkit. The demo uses AjaxControlToolkit for .Net4.0 but AjaxControlToolkit for .Net3.5 also works correctly. In my demo project, the control IDs are TextBox1, ListBox1 and PopupControlExtender1. In order to make the DropdownTextBox works, you also need to add the following codebehind:

    Private Sub ListBox1_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles ListBox1.SelectedIndexChanged
        TextBox1.Text = ListBox1.SelectedValue
        Me.PopupControlExtender1.Commit(ListBox1.SelectedValue)
    End Sub

Points of Interest

Both TextBox and DropDownList are very useful in ASP.Net development. This DropdownTextBox is a combination of the two useful controls so that user can either type in custom item or select an item from the dropdown list.

History

This is the first version.

License

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

Share

About the Author

petersgyoung
Founder Bisware Technology Limited
Hong Kong Hong Kong
I am an IT consultant and software developer based in Hong Kong.

Please click here to see my blog and my company at biswaretech.com

Comments and Discussions

 
BugDrop down item isn't highlighted on hover PinmemberPham Dinh Truong6-Aug-13 22:45 
Great article! Thank you so much for sharing an excellent article.
Of course, there is always a bug for any software. So do this article Smile | :)
I found one bug Smile | :)
That is the drop down item isn't highlighted on hover like a normal dropdownlist.
I tried with JavaScript but in vain. That's why I moved to play around with JQuery, then I had luck getting it to work. Here's the patch for it:
 
<!--Added by Henry 07/08/2013: Highlight dropdown item when hover-->
   <script type="text/javascript">
       $(document).ready(function () {
           $("select option").hover(function (e) {
               $(this).css('background-color', 'blue');
               $(this).css('color', 'white');
           });
           $("select option").mouseout(function (e) {
               $(this).css('background-color', '');
               $(this).css('color', '');
           });
       });
 
   </script>

GeneralRe: Drop down item isn't highlighted on hover Pinmemberpetersgyoung7-Aug-13 20:53 
GeneralMy vote of 5 PingroupRoshu Pradhan21-Apr-13 3:21 
GeneralMy vote of 2 PinmemberDean Oliver1-Feb-12 8:23 
GeneralRe: My vote of 2 Pinmemberpetersgyoung5-Mar-12 14:30 

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
Web03 | 2.8.140916.1 | Last Updated 1 Feb 2012
Article Copyright 2012 by petersgyoung
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid