Wednesday, September 17, 2008

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.


No comments: