Click here to Skip to main content
15,070,511 members
Articles / Web Development / CSS
Posted 21 Sep 2004


111 bookmarked

Multiple Columns DropDown for ASP.NET

Rate me:
Please Sign up or sign in to vote.
3.32/5 (40 votes)
30 Mar 20055 min read
To show multiple columns in a dropdown list, from ASP.NET.

Image 1


There are many dropdown controls out there for the web, but I have not seen any dropdown controls which can show multiple columns like in VB or MS Access, so I thought of building my own control, which will display the columns based on the selection made in a SQL statement, e.g., "Select col1,col2,col3 from db", but I recommend to select two or three columns, at most.

How the control was built

This is not just one control, but it's a composite control, means it's built using more than one control, resulting in one super control. The figure below demonstrates how the control works. The controls used are TextBox, Label, DataGrid and a Panel control which holds all the controls. I have also set the ID property for the TextBox and the DataGrid as "txt" and "DDL", because due to the implementation of the INamingContainer interface (to maintain unique names for the controls), the control would have generated ":CTL1", if I did not set the ID value.

Image 2

Using the code

It's very simple to use the code, I have shown this sample in VB.NET, but you could use it in C# also. Download the DLL file for this control, and just add the control to your toolbox by selecting the DLL from the location where you unzipped the file. Once you drop the control in your aspx page, you could set the properties either through the Properties window, or from the HTML page.

Properties for the Control

Image 3

There are many properties for this control which are self explanatory, but there are some properties which need some explanation, like:

  • GridRowColor - This sets the row color of the grid when the mouse is moved on the grid, by default the color is LightGray.
  • GridTextColor - This sets the color of the text in the grid when the mouse is moved on the grid, by default the color is Red.
  • ViewColID - This is one of the cool features for this control. Imagine your "Select" statement (or any other means of populating the grid) has two or more columns, and you need to show the 2nd, 3rd or 4th column in the text display. You set this property value to show the column you like, the default is 0, means the first column will be displayed. If you need to show the 3rd column, set this property value to 2. If you set this value to more than the count of columns, an error will be displayed as shown in the figure below:

    Image 4

    Based on the value you selected for this property, when you move the mouse over the grid, the values in the text changes.

  • CssClass - Copy this style and paste it in your aspx page below the head section:
    <style lang="text/css" media="screen"> .general { FONT-SIZE: 8pt; 
      COLOR: navy; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif } </style>.
  • Height - Do not set the Height property in the property window or in your HTML page, set this property in your code behind page. I.e.:
    MultiColDD_List1.Height = Unit.Pixel(200)
  • ToolTip - Tooltip value could be changed to any text.

One more thing, there is one method for this control, "retTotRows", you have to use this method, else control may not work properly. Actually, this method returns the count of rows to be populated in the dropdown list, and generates the Click event.

To use this method:


or if you are generating the items from any other means, make sure you pass the total rows to this method.

Private Sub Page_Load(ByVal sender As System.Object,
 ByVal e As System.EventArgs) Handles MyBase.Load
 If Not IsPostBack Then

  MultiColDD_List1.Width = Unit.Pixel(300)
  MultiColDD_List1.Height = Unit.Pixel(200) ' make sure you set
   'the height property, else there will be no scroll bar.
  MultiColDD_List1.DataSource = CreateDataSources()
   ' this function returns the dataset to bind to the control

 End If

End Sub

Function CreateDataSources() As DataSet
  Dim DS_P As DataSet
  Dim cn As SqlConnection

  Dim cmdP As SqlDataAdapter

  Dim sqlStr As String =
   "select au_Lname,Phone from authors " '  you could add more cols

  'Change the SQL Server name {Data Source = <your server name>}
  cn = New SqlConnection("Integrated Security=SSPI;Persist Security
   Info=False;Initial Catalog=Pubs;Data Source=NJ5Mail")
  cmdP = New SqlDataAdapter(sqlStr, cn)

  DS_P = New DataSet

  cmdP.Fill(DS_P, "Policies")
   ' make sure you use this method
  Return DS_P


 Catch ex As Exception

 End Try
End Function

Retrieving Control Value

Once you select the item, the value for the dropdown could be retrieved either using JavaScript to send it to another page or directly in the code behind. Suppose we have an HTML button. In the onClick event of this button, the value of the dropdown could be sent to another page, the code below demonstrates this:

<script language="javascript">

function Show(){"anotherPage.aspx?ddValue=" + 
<input id="Shows" onclick="Show();" type="button" value="HTML BUTTON">

Make sure that the name of the control ends with "_txt". To use it in the same page, directly call the control's value like: MultiColDD_List1.Text.

Using the Intellisense

There are many custom controls, when you use them in your aspx page, you don't get to see the properties for the control, which makes your life difficult finding the properties for the control. So how to make the intellisense work? First, you have to generate the schema file for this control, i.e., ".xsd", the ZIP file contains the .xsd for this control. Copy this .xsd file to the following folder:

  • C:\Program Files\Microsoft Visual Studio .NET 2003\Common7\Packages\schemas\xml

and in the body tag of your aspx page, add the following code:

<body xmlns:ksj1="urn:" 

The figure below shows the intellisense:

Image 5

Points of Interest

This control implements the INamingContainer interface. If you see the HTML output of your ASP.NET pages, the client-side names of the controls don't always match the names you've given them in the server code. This is because ASP.NET automatically renames them to keep things organized, and to ensure that no two controls have the same client-side ID. By implementing the INamingContainer interface, the custom control is identified as a container for the child controls. It also ensures that all the sub-controls are named similarly in the output. This will be important for referencing the controls in client-side code. That's why when you click the Show button, the value of the control is taken from MultiColDD_List1_txt.value and not from the ID you have given in the aspx page, i.e., MultiColDD_List1. Because this is a composite control, instead of using the Render method, I have overridden the CreateChildControls method, and all the tricks are done here. Another feature of this control is that when you move the mouse over the grid, you can see the text changing in the textbox.



This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


About the Author

Jay Kulaindevelu
Web Developer
United States United States
I'm a .Net Programmer/Web Developer, mostly working on ASP.Net C# and VB.Net,Oracle,SQL server 2000.

Comments and Discussions

QuestionI want This Functionality in C# Web Forms Will You Please Help Me/???????? Pin
Shubham @R$27-Jul-14 20:03
MemberShubham @R$27-Jul-14 20:03 
GeneralMy vote of 1 Pin
Member 986148910-Jun-14 19:24
MemberMember 986148910-Jun-14 19:24 
BugMultiColDD_List_DDL is not defined and shows 6 and nothing in dropdownlist Pin
Member 986148910-Jun-14 2:53
MemberMember 986148910-Jun-14 2:53 
Questionwaste of time Pin
ramukdin12-Feb-14 2:26
professionalramukdin12-Feb-14 2:26 
AnswerRe: waste of time Pin
Member 272868017-Apr-14 2:52
MemberMember 272868017-Apr-14 2:52 
GeneralMy vote of 2 Pin
pawan rathour12-Jul-11 22:05
Memberpawan rathour12-Jul-11 22:05 
GeneralMy vote of 1 Pin
RagesFury18-May-11 8:57
MemberRagesFury18-May-11 8:57 
GeneralMy vote of 3 Pin
nickel26411-Oct-10 20:09
Membernickel26411-Oct-10 20:09 
Rantnot satisfied Pin
vpg198613-Jan-10 3:31
Membervpg198613-Jan-10 3:31 
GeneralMy vote of 1 Pin
TAFIN21-Dec-09 17:19
MemberTAFIN21-Dec-09 17:19 
GeneralMultiColDD_List in C# Pin
Nitish.112721-Jun-09 20:12
MemberNitish.112721-Jun-09 20:12 
GeneralNot Working Pin
Bryan Duchesne24-Dec-08 10:24
MemberBryan Duchesne24-Dec-08 10:24 
Generalon page error Pin
sairamvegi21-Apr-08 5:11
Membersairamvegi21-Apr-08 5:11 
GeneralCode is no working with me Pin
nileshmacwan20-Apr-08 23:50
Membernileshmacwan20-Apr-08 23:50 
GeneralModified Code Pin
sairamvegi20-Apr-08 23:32
Membersairamvegi20-Apr-08 23:32 
GeneralIs their any way to get the code [modified] Pin
dileepdil27-Mar-08 20:32
Memberdileepdil27-Mar-08 20:32 
General"MultiColDD_List1_DDL is undefined" Pin
Maheswari_Ramasamy29-Nov-07 19:06
MemberMaheswari_Ramasamy29-Nov-07 19:06 
GeneralRe: "MultiColDD_List1_DDL is undefined" Pin
Amit Chandak10-Mar-09 14:59
MemberAmit Chandak10-Mar-09 14:59 
General6 and no result in drop down Pin
Diljeet10-Oct-07 7:57
MemberDiljeet10-Oct-07 7:57 
GeneralRe: 6 and no result in drop down Pin
Dewey10-Oct-07 20:55
MemberDewey10-Oct-07 20:55 
GeneralRe: 6 and no result in drop down Pin
Diljeet11-Oct-07 4:57
MemberDiljeet11-Oct-07 4:57 
QuestionCan make it work in VStudio 2005 C# Pin
BENETI4-Jul-07 21:47
MemberBENETI4-Jul-07 21:47 
General6 and no rows Pin
DJDAGZ29-Mar-07 0:32
MemberDJDAGZ29-Mar-07 0:32 
GeneralMultiColDD_List1_DDL is undefined Pin
ismail turkmenoglu26-Mar-07 6:03
Memberismail turkmenoglu26-Mar-07 6:03 
QuestionRe: MultiColDD_List1_DDL is undefined Pin
laisinwei22-Jul-08 18:04
Memberlaisinwei22-Jul-08 18:04 

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.