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 () { };
To “disable”:
document.getElementById("MyTextboxBeingExtendedID").disabled = false;
$find("MyDropdownExtenderID")._showPopup = function () { $find("MyDropdownExtenderID")._dropPopupPopupBehavior.hide(); };
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:
Post a Comment