INLINE EDIT EXTENDER

This is a proposed ASP.NET AJAX Toolkit Extender Control. It extends both dropdownlist and textbox controls. Its purpose is to allow normal, inline text to be exposed as either a textbox or dropdownlist control and therefore edited (i.e., user clicks label, label turns into textbox or dropdownlist, user edits value, control turns back into label with new value). This is an excellent visual solution for situations such as when there are many search criteria to be displayed on the page, but you do not want to clutter the page with "option entering" controls. This is a much more subtle and aesthetically pleasing presentation.


Extending TextBox Controls

This will probably be the most common use of this extender. The label is initialized with the value of the textbox. Upon clicking the label, the textbox is shown. The user can then edit the contents of the textbox. Upon blurring focus, the textbox is hidden and the label shown. Should the user delete the contents of the textbox or only enter whitespace into the textbox, the textbox is not hidden, thus avoiding showing a label with no text.


Extending DropDownList Controls

The label is initialized with the text property of the selected item in the dropdownlist. The value property is not used to allow for situations where the value property is empty but the text property is not, which is quite common. Upon clicking the label, the dropdown list is shown with the selected item showing. The user can then expand the dropdown list and make a new selection. Upon making a new selection or blurring focus, the dropdownlist is hidden and the label shown.


Demonstration

A small demo of this control may be found at http://www.svfriends.com/demo/.


InlineEdit Properties:
  • TargetControlID - Required. The ID of the dropdownlist or textbox for this extender to operate on.
  • LabelControlID - Required. The ID of the label control that displays the value of the dropdownlist or textbox.
  • TargetCssClass - Optional. The CSS class applied to the dropdownlist or textbox.
  • LabelNormalCssClass - Optional. The CSS class applied to the label in its non-mouseover state.
  • LabelHoverCssClass - Optional. The CSS class applied to the label on mouseover.
  • OnClientTargetValueChanged - Optional. Client-side script to execute after the dropdownlist's or textbox's value has changed.

Comments
  • The LabelNormalCssClass and LabelHoverCssClass should be used to provide visual clues as to the purpose of the text displayed. Visual clues such as underlining, changing background colors, and changing cursors should be used to indicate that the text has an interactive purpose.
  • This extender has been tested on IE6, IE7, FF2, NN8, and Safari 3 for PC. It has not yet been tested on Opera or Mac Safari.
  • Enter key behavior is intercepted while changing the dropdownlist or textbox values to avoid form submission.

Last edited Nov 20, 2007 at 4:41 PM by DisturbedBuddha, version 13