One of the most exciting new features introduced in Microsoft Internet Explorer 5 is Dynamic HTML (DHTML) Behaviors. DHTML Behaviors are components that encapsulate specific functionality or behavior on a page. There are two types of Behaviors; Element and Attached. In this article, I’ll be demonstrating Attached Behaviors, as these can be attached to ASP.NET WebControls.
The Dropdown List
For the purpose of this article, the Behavior will be attached to a standard HTML
Select element but can be also attached to an ASP.NET
DropDownList. The dropdown has an option with the value of -2 that will signal to the Behavior to change to a textbox.
<select name="Dropdown1" id="Dropdown1" class="FormDropdown"
onDropdownChange="alert('Dropdown has changed!');"
onDropdownRefresh="alert('Dropdown has been refreshed!');">
<option value="-1" selected>Please Select...</option>
There are two custom events, the “
OnDropdownChange” event fires when the dropdown changes into a textbox, either by selecting the option with a value that matches with the “
ChangeValue” property of the behavior or by calling the “
Change” method. The other is the “
OnDropdownRefresh” event, this fires when the textbox changes back to the dropdown; this can be by clicking the refresh icon or by calling the “
Creating the Behavior
The Behavior itself isn’t written within the HTML document but in its own file with a .htc extension and is enclosed in
</public:component> tags. The first thing to do is add the declarations which include properties, events, and methods.
<public:component id="EditableDropdown" name="EditableDropdown" lightWeight="true" >
<public:property name="Version" value="Editable Dropdown 1.0" />
<public:property name="ChangeValue" value="-2" />
<public:attach event="ondocumentready" handler="Init" />
<public:attach event="onchange" handler="Change" />
<public:method name="Refresh" />
<public:method name="Change" />
<public:event id="onDropdownChange" name="ondropdownchange">
<public:event id="onDropdownRefresh" name="ondropdownrefresh">
The Behavior runs its “
Init” function when the document is ready, this function just checks that the Behavior is attached to a dropdown element.
if(!tagName.toLowerCase() == "select")
alert("Please attach to a dropdown list.");
Change” function runs when the user changes the dropdown. In the “
Change” function, we first check to see if the dropdown has already changed (this may be the case if the “
Change” function is called from script), we then check to see if the value of the dropdown is the same as the “
ChangeValue” property, which in this case is -2.
if(value != ChangeValue)return;
var txtElem = winDoc.createElement("<input type='text' id='"+
id +"_txt' name='" + name +
"_txt' value='' class='FormTextbox' style='width:"
+ (style.width - 15) + "px'>");
var imgElem = winDoc.createElement("<img src='Refresh.gif'" +
" width='15' height='13' border='0' onclick='"+ id +
".Refresh();') style='cursor:hand' id='"+ id +"_img'>");
style.display = "none";
changed = true;
We then create a textbox with the same ID as the dropdown with a “_txt” suffix and a refresh icon. We then insert them next to the dropdown, hide the dropdown, and then fire the “
Attaching the Behavior
Attaching the Behavior is as simple as adding a CSS style to the
DropDownList. In the example, there is a class attached called “
font-family: Verdana, Arial, Helvetica, sans-serif;
As you can see, we link the Behavior's HTC file with the CSS behavior attribute.
Using the Behavior
The Behavior creates a new element with a “_txt” suffix. Using ASP.NET, we can then look for the new element and insert it into a database. This code uses C# to check to see if the dropdown has a new value.
if(Request.Form["Dropdown1_txt"] != null)
newValue = Request.Form["Dropdown1_txt"];
While I was creating this Behavior, I had certain decisions to make, some of which I never had chance to try out or even think about deeply enough. The component works and does its job very well, but is far from being complete. Here are a list of things that might be worth considering if you want to improve the Behavior.
Renaming the dropdown and naming the textbox to the original name of the dropdown, using an Element Behavior instead of an attached Behavior, and maybe a ASP.NET server control as a wrapper.
Links and Resources