Using UpdatePanels with ModalPopups

kirtid — Fri, 04 May 2007 02:13:00 GMT

One of the most frequently asked questions on the Toolkit forums and at MIX after Shawn's demo was how to get UpdatePanels to work right with ModalPopups. The trick is to understand that the ModalPopup extender attaches itself to more than just the TargetControl and PopupControl. If you include the OK and Cancel buttons inside the ModalPopup Panel in an UpdatePanel, make sure you include the extender declaration in it as well. If you do not, once a postback occurs the extender will not reinitialize the handlers and you will get null references. Also, if buttons inside the ModalPopup Panel are set to be OK and Cancel buttons on the ModalPopup Extender, then their sole purpose is to close the Popup Panel and run their respective scripts if any have been set. They will not perform postbacks or execute any other client side handlers since the ModalPopup prevents the event from propagating up.

I have attached a sample page that demonstrates three simple scenarios with ModalPopups and UpdatePanels.

ModalPopup with an UpdatePanel inside its Popup Panel: Make sure that the OK and Cancel buttons are not inside the UpdatePanel otherwise the handlers will be rendered useless on postback.
UpdatePanel that contains a ModalPopup Extender and its Popup Panel: Clicking OK or Cancel still does not cause the postback since those buttons are tied to client side handlers. Clicking on any other control will cause the server side handlers to kick in. Since the extender declaration is inside the UpdatePanel, the asynchronous postback causes the ModalPopupBehavior to be reinitialized correctly and any client side handlers are setup again when the request is completed. So if you would like to postback every time the user clicks OK or Cancel, just don't set those properties on the extender. The Modal Popup Panel closes on postback as desired since the entire popup is inside an UpdatePanel.
What if that Popup Panel in # (2) contains an UpdatePanel: Specify the triggers that will cause the outer panel to update and allow the UpdatePanel inside the ModalPopup to operate on its own terms. This time the ModalPopup Panel does not close on postback triggered from within it because the trigger for the outer panel is specifically set to be a separate button.

It is a good idea to design the page without UpdatePanels in mind. When writing the page place UpdatePanels when the rest is done. Once you have the page setup, determine locations in your page that need to be asynchronously updated and the controls that should act as triggers to perform that operation and then appropriately place UpdatePanels with the correct triggers and UpdateMode property set. With extenders it is important that you take into consideration not just the controls targetted by the extender but any others which it hooks into to provide additional functionality.

This post should evolve as I get more feedback and I will update the sample accordingly as well. I hope this helps.

Yours modally

kirtid — Mon, 09 Apr 2007 04:43:00 GMT

I can see a gray Seattle skyline as I stare out of my window on what should have ideally been a nice Sunday evening in spring time. It is pouring buckets and the view is hazy, reminding me of the html hidden behind the gray modal popup background. I am unable to get out of my apartment and hit downtown before the showers stop because winter seems to be stuck modally in Seattle, just as I am unable to access the webpage till I dismiss the popup. Does it sound like I am obsessed with the ModalPopup? Well, not exactly. I am trying to add some more functionality to it and am stuck, unable to proceed and not liking it, hence the analogy to get the message across.

The ModalPopup is already a loaded extender. The behavior encapsulates PopupBehavior, DragBehavior and DropShadowBehavior. Having made the ModalPopup draggable, I thought it would be interesting to make it resizable as well. Although, adding the ResizableControlBehavior problem turned out to be harder than I had expected.

Here is a brief overview on how the ModalPopup works.

TargetControl: The control whose click event causes the popup to show.

PopupControl: The popup that will be shown modally.

If DragDrop and DropShadow functionalities are turned on the ModalPopup, the markup will be arranged in the following way which is quite tedious with the positioning of all elements needed to be handled correctly.

<OuterContainerDiv> // created by the ModalPopupBehavior

<PopupControl> // what the user passes as the Popup

<DragHandleDiv /> // control that the user would like to see as the DragHandle

</PopupControl>

<DropShadowDiv /> // DropShadow div created by the behavior

</OuterContainerDiv>

What do I have so far? The ResizableBehavior has been added to the PopupControl and tracking is turned on, on the DropShadow so that it gets redrawn when PopupControl is resized. Overflow is set to "auto" on the PopupControl. The problem is that the resize handle gets hidden behind the scroll bars, which means that I need to scroll to bring it into view before I can resize it. If only the resize handle could be placed right at the intersection of the two scroll bars!

A better, but more long winded option would be to write a ResizableScrollBar extender that adds custom scroll bars to panels if necessary just like the built-in html overflow support and allows the panel to be resized as well. In which case the user would have more control on the resize handles and scroll bars. The Slider behavior could be repurposed to be an html scroll bar perhaps and the extender would have to perform the calculations to scroll properly. Any other ideas to dismiss this "modal" issue?

Hello Kirti : ModalPopup

Using UpdatePanels with ModalPopups

Yours modally