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

Multiple Columns DropDown for ASP.NET

, 30 Mar 2005
Rate this:
Please Sign up or sign in to vote.
To show multiple columns in a dropdown list, from ASP.NET.

Introduction

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.

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

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:

    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:

MultiColDD_List1.retTotRows(DS_P.Tables(0).Rows.Count)

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
    MultiColDD_List1.DataBind()

   End If

  End Sub
   
  Function CreateDataSources() As DataSet
   Try
    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")
    MultiColDD_List1.retTotRows(DS_P.Tables(0).Rows.Count) 
     ' make sure you use this method
    Return DS_P


    DS_P.Dispose()
    cmdP.Dispose()
    cn.Close()

   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(){
  window.open("anotherPage.aspx?ddValue=" + 
    document.getElementById('MultiColDD_List1_txt').value);
}
</script>
<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:http://schemas.ksjControls.com/ASPNET" 
                                    MS_POSITIONING="GridLayout">

The figure below shows the intellisense:

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.

Enjoy..

License

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

Share

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/???????? PinmemberMember 1096836627-Jul-14 21:03 
GeneralMy vote of 1 PinmemberMember 986148910-Jun-14 20:24 
BugMultiColDD_List_DDL is not defined and shows 6 and nothing in dropdownlist PinmemberMember 986148910-Jun-14 3:53 
Questionwaste of time Pinprofessionalramukdin12-Feb-14 3:26 
AnswerRe: waste of time PinmemberMember 272868017-Apr-14 3:52 
GeneralMy vote of 2 Pinmemberpawan rathour12-Jul-11 23:05 
GeneralMy vote of 1 PinmemberRagesFury18-May-11 9:57 
GeneralMy vote of 3 Pinmembernickel26411-Oct-10 21:09 
Rantnot satisfied Pinmembervpg198613-Jan-10 4:31 
GeneralMy vote of 1 PinmemberTAFIN21-Dec-09 18:19 
GeneralMultiColDD_List in C# PinmemberNitish.112721-Jun-09 21:12 
GeneralNot Working PinmemberBryan Duchesne24-Dec-08 11:24 
Generalon page error Pinmembersairamvegi21-Apr-08 6:11 
GeneralCode is no working with me Pinmembernileshmacwan21-Apr-08 0:50 
GeneralModified Code Pinmembersairamvegi21-Apr-08 0:32 
GeneralIs their any way to get the code [modified] Pinmemberdileepdil27-Mar-08 21:32 
General"MultiColDD_List1_DDL is undefined" PinmemberMaheswari_Ramasamy29-Nov-07 20:06 
GeneralRe: "MultiColDD_List1_DDL is undefined" PinmemberAmit Chandak10-Mar-09 15:59 
General6 and no result in drop down PinmemberDiljeet10-Oct-07 8:57 
GeneralRe: 6 and no result in drop down PinmemberDewey10-Oct-07 21:55 
GeneralRe: 6 and no result in drop down PinmemberDiljeet11-Oct-07 5:57 
QuestionCan make it work in VStudio 2005 C# PinmemberBENETI4-Jul-07 22:47 
General6 and no rows PinmemberDJDAGZ29-Mar-07 1:32 
GeneralMultiColDD_List1_DDL is undefined Pinmemberismail turkmenoglu26-Mar-07 7:03 
QuestionRe: MultiColDD_List1_DDL is undefined Pinmemberlaisinwei22-Jul-08 19:04 

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
Web02 | 2.8.141223.1 | Last Updated 30 Mar 2005
Article Copyright 2004 by Jay Kulaindevelu
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid