Multiple Columns DropDown for ASP.NET

• Download demo project - 21.7 Kb

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 2^nd, 3^rd or 4^th 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 3^rd 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..