Editable Dropdown - DHTML Behavior

• Download source files - 2.19 Kb

Introduction

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>
  <option value="1">Item1</option>
  <option value="2">Item2</option>
  <option value="3">Item3</option>
  <option value="4">Item4</option>
  <option value="5">Item5</option>
  <option value="-2">Other...</option>
</select>

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 “Refresh” method.

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> </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">

</public:component>

The Behavior runs its “Init” function when the document is ready, this function just checks that the Behavior is attached to a dropdown element.

function Init()
{
      // Check to see if attached to a dropdown list.

      if(!tagName.toLowerCase() == "select")
      {
            alert("Please attach to a dropdown list.");
            return;
      }
}

The “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.

function Change()
{
      // Has the element already changed?

      if(changed) return;
      // Check to see if we need to change the dropdown list.

      if(value != ChangeValue)return;
      
      // Create the textbox that will replace the dropdown list.

      // The id and name are the same as the dropdowns with a "_txt" suffix.

      var txtElem = winDoc.createElement("<input type='text' id='"+ 
                    id +"_txt' name='" + name + 
                    "_txt' value='' class='FormTextbox' style='width:" 
                    + (style.width - 15) + "px'>");
      parentElement.appendChild(txtElem);
      
      // Create the refresh image and insert.

      var imgElem = winDoc.createElement("<img src='Refresh.gif'" + 
          " width='15' height='13' border='0' onclick='"+ id + 
          ".Refresh();') style='cursor:hand' id='"+ id +"_img'>");
      txtElem.parentElement.appendChild(imgElem);     
 
      // Hide the dropdown list and set the "changed" property to true.

      style.display = "none";
      changed = true;
 
      // Set the focus to the new textbox.

      txtElem.focus();
      
      // Fire the "onDropdownChange" event.

      onDropdownChange.fire(createEventObject());     
}

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 “OnDropdownChange” event.

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 “FormDropdown”.

.FormDropdown 
{
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size: 11px;
      width: 150px;
      behavior:url(EditableDropdown.htc);
}

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.

string newValue;
 
if(Request.Form["Dropdown1_txt"] != null)
    newValue = Request.Form["Dropdown1_txt"];

Considerations

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

• MSDN -- Behaviors

Demo

• Demo.