Monday, November 14, 2011

Client-side disable/enable AJAX DropDownExtender using Javascript

I was recently adding a series of controls to an form which utilized the DropDownExtender to display an OptionList attached to a TextBox.  A requirement of this form was that the control-values could be overridden by the user checking a checkbox on the form.   Sounds simple enough, right?   

Now the fun stuff.   The form is presented in a ModalPopup and I don’t want to introduce any lag to the form by way of PostBacks and no additional weight by adding UpdatePanels so I decided to use Javascript to Enable and Disable the extender.

Advantages:   Fast, simple code, no post-back.  No lag

Disadvantages:  No more hover-arrow on the control.  The hover-arrow is defaulted to show during MouseOver to indicate that the control can “drop down”.  In testing this resolution, I was able to mimic the disabling (by not showing it) but not the enabling of it.  If anyone knows a workaround for this other than completely wiping the control and then recreating, please let me know.

First – remove the hover event of the extender.   Bye-bye drop-arrow…

$find("MyDropdownExtenderID").hover = function () { };


This will cause Nothing to happen when you hover over the control. No highlighting, no dropdown arrow. Nothing.

Change the Active state by simply modifying the extender’s behaviors:

To “disable”:



document.getElementById("MyTextboxBeingExtendedID").disabled = false;
$find("MyDropdownExtenderID")._showPopup = function () { $find("MyDropdownExtenderID")._dropPopupPopupBehavior.hide(); };


To “enable”:

document.getElementById("MyTextboxBeingExtendedID").disabled = true;

$find("MyDropdownExtenderID")._showPopup = function () { $find("MyDropdownExtenderID")._dropPopupPopupBehavior.show(); };

The first line disables/enables the textbox that serves as the TargetControlID for the extender.


The second line redefines the _showPopup event to act as defined in the “hide” event of the popup’s “show” behavior (when the list shows) – meaning the control specified by the DropdownControlID of the extender will either be seen or not be seen.

No comments: