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.

Conditional ModalPopupExtender as UpdateProgress control

I'm a big fan of Matt Berseth's blog and his articles are some of the most clear, concise ones out there when dealing with UI elements and webcontrols for ASP.NET.   I've happily employed his ModalPopup as an AJAX Progress Indicator example in a project I'm working on but ran into a small hitch.

Matt's Indicator envelops the beauty of simplicity in that it simply calls the ModalPopupExtender's show() and hide() events when the page's requestmanager receives a request from the Scriptmanager.

One of my pages contains a fairly dense GridView which reflects data that's changed quite often.  As such, I've encapsulated this GridView in an UpdatePanel control and added a Timer control to it with a tick of 20000.   I wanted to show the Modal Progress Indicator when users changed filtering options (controls) for this Gridview but didn't want it to show on postback from the Timer.  After a bit of searching it was as simple as pulling the name of the control that triggered the async call and managing the reaction.

 

<form id="form1" runat="server">
<cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</cc1:ToolkitScriptManager>
<script type="text/javascript" language="javascript">
    //  register for our events
    Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequest);
    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequest);    
    function beginRequest(sender, args)
    {
       if(args.get_postBackElement().id.toString() != 'NameOfMyTimerControl')
        {
            // show the popup
            $find('NameOfMyPopupExtender').show();      
        }  
    }
    function endRequest(sender, args) 
    {
        //  hide the popup
        $find('NameOfMyPopupExtender').hide();
    }
</script> 

Now my Progress Indicator only shows when users interact with the page and NOT when the timer refreshes the data.