A DropDownList which you can hide bellow a DIV tag in IE6 and other browser

• Download CP_ARNABDROPDOWNLIST_IN_WEB - 11.46 KB

Introduction

This is an effort to replicate and improve on the functionality of the MS ASP.Net Drop Down List control for web applications running on IE 6 browsers. It supports similar features as the MS Drop Down List control. This is a work in progress. By downloading and studying the code in the demo project, you will see how simple it is to implement the code into your own projects. Below are several screen shots of the control and instructions on its use.

Background

It is not uncommon as developers to encounter Microsoft ASP.Net controls with limitations. One such control is the Drop Down List or DDL when used in an IE6 browser. The problem is that we run into a situation where one DDL control displays over another and is not fixable by simply assigning a Z-index to the controls. This is a well-known bug with IE6 with trying to absolutely position divs on top of select controls. As you probably guessed, Microsoft fixed this problem in IE 7 and 8. But like most of us developers, you probably have web applications where you expect some of your users to access your apps using the IE 6 browser; in this case, you will encounter the DDL’s limitation. Like many developers do, I searched within the CodeProject and other sites for a control similar like the one in this article but could not find it. So, I set out to create my own. I needed a DDL control that retained much of the standard MS’s version with the added functionality of allowing control of the DDL using Z-indexing.

Using the code

1. Download the project code into a directory

2. Open the project in Microsoft Visual Studio 2008

3. In the Default.aspx.cs edit the connection string to reflect your database server and database (Northwind for this example).

4. Ensure that the ARNABDROPDOWNLIST.dll is copied into the Bin folder of the project.

5. Register the ARNABDROPDOWNLIST.dll in the Default.aspx page (see illustration below).

Top of the page register the control like...

<cc1:ARNABDROPDOWNLIST Width="250" ID="DropDownList1" ZIndex="2" OnClientChange="test" runat="server" />

ZIndex: You can add zindex value here.
OnClientChange: You can add Java Script Client function here .Don’t need to add "()" after Javascript function name.


Note : The control does not have server side method. You have to use _dopostback or form.submit() to create postback.


Code Behind Part.

SqlDataAdapter da = new SqlDataAdapter("select top 10 ProductID,ProductName from Products", con);
DataSet ds = new DataSet();
da.Fill(ds);
DropDownList1.DataSource = ds.Tables[0];
DropDownList1.DataTextField = "ProductName";
DropDownList1.DataValueField = "ProductID";

DropDownList1.SelectedValue = "5";

Same as asp.net drop down list control. You don’t need to call DataBind() and for now DataSource only support DataTable.

After PostBack

protected void Button1_Click(object sender, EventArgs e)
{
  lbl1.Text = "Drop Down1 value :" + DropDownList1.SelectedValue;
  lbl2.Text = "Drop Down2 value :" + DropDownList2.SelectedValue;
}

Disclaimer and acknowledgements

This control and the source code are free to be used with commercial and non commercial software. However you are not allowed to sell the source code for profit. The author of this article does not take any responsibility for any damage done or caused directly or indirectly by this source code or an application using this source code. If you decide to redistribute the source code, please include my name and e-mail somewhere in the source. If you create an application with this control, I would appreciate an email describing what it is or a screen shot of it so that I'll know it is being used and may serve as an incentive to continue improving this code/control. If you are interested in the pre-compiled dll that comes with this project contact me and we can discuss a fee.

Note : I am not a good writer.Special Thanks to Joseph who help me to write this article.