[ Download Code ]

ScreenShot

How the Control was Built

This is not just one control; it's a composite control, which 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 a Textbox, Label, DataGrid, and a Panel control that 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 implementations of the  INamingContainer interface (to maintain the unique name for the controls), the control would have generated ":CTL1" if I did not set the ID value. The sample picture shows the structure of the control:

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, just add the control to your toolbox by selecting the dll from the location where you unzipped the file. Once you dropped the control in your ASPX page, you could set the properties either through properties window or from the HTML page.

Download Code
Properties for the Control

There are many properties for this control that are self explainatory, but there are some properties that need some explanation:

• 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, which 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 change.

• CssClass - Copy this style and paste it in your ASPX page in 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, e.g.,    MultiColDD_List1.Height = Unit.Pixel(200).
• ToolTip - The ToolTip value can be changed to any text.

To use this method:

MultiColDD_List1.retTotRows(DS_P.Tables(0).Rows.Count)
//Where DS_P is the dataset ...see code below!

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

</font>


<font face="Courier New"><font size="2">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
    Dim DS_P As DataSet
    Dim cn As SqlConnection

    Dim cmdP As SqlDataAdapter

    Dim sqlStr As String = 
     "select au_Lname as 'Last Name',au_fname as 'First Name',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=(local)")
    cmdP = New SqlDataAdapter(sqlStr, cn)

    DS_P = New DataSet

    cmdP.Fill(DS_P, "authors")

    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()

  End Function

Retrieving Control Value

Once you select the item, the value for the drop down 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 Click event handler of this button, the value of the drop down could be sent to another page; the code below demonstrates this:

</font></pre><pre><font face="Verdana" size="2">  <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.

Download Code

Using the Intellisense

There are many custom control that, when you use them in your ASPX page, don't show the properties for the control, which makes it difficult to find the properties for the control. So how do you make the Intellisense work?  First, you have to generate the schema file for this control, i.e., the XSD.  The zip file contains the XSD for this control. Copy this 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.

Features

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 there. Another feature of this control is that when you move the mouse over the grid, you can see the text changing in the textbox.

Download Code

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 take 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.