Getting the ModalPopupExtender to work in SharePoint 2007

By rickvdbosch

- 3 minutes read - 456 words

Getting the ModalPopupExtender from the Ajax Control Toolkit to work (decently) in SharePoint was not exactly a walk in the park. With a default SharePoint installation, the modal popup is partly positioned ‘outside’ of the page (you only see the bottom right part of the popup in the top left corner of the browser). Postbacks are not executed or executed poorly and the page gets garbled up. A possible solution for the positioning of the popup is to set the X and Y property of the ModalPopupExtender. Downside is you never know (for sure) if the popup is positioned inside the visible part of the browser because of things like non-maximized browser, different resolutions and so on.
Today we seem to have solved our issues with the ModalPopupExtender in SharePoint. We haven’t tested it in all scenario’s yet, but we’ll get to that. At this point everything looks the way it is supposed to. And it seems to work, too… ;).

The extra steps we took to make these two play together the way we wanted them to, besides the usual steps to make Ajax work in ASP.NET 2.0, are:

  • Install Windows SharePoint Services 3.0 Service Pack 1

  • Install The 2007 Microsoft Office Servers Service Pack 1

  • Alter the masterpage: add a DOCTYPE tag (we used XHTML 1.0 Transitional)

  • Always show the modal popup from code (*)

  • Put an updatepanel around everything inside the usercontrol (**)

  • Because of our setup with close-images that postback (because we have to clear controls and that sort of stuff) and more, we couldn’t use the TargetControlID property for the ModalPopupExtender. Well, we could, but that would result in the background not being displayed properly half the time ;). This can be solved by setting the TargetControlID to a dummy control (like a hidden one) and showing the popup from code.

** We have a usercontrol with several usercontrols in it. This one usercontrol (the parent) was added to a page. The normal (postback) controls on the usercontrols didn’t work after one of the modal popups was shown. And I can image neither would any other ’normal’ controls on the page, but we didn’t encounter this scenario. The problem was the page would freeze with a message in the taskbar stating ‘The page is busy submitting data to the server’ directly after an Ajax postback. The controls that performed a ’normal’ postback did nothing: the serverside code just was not executed. We solved this by putting an updatepanel around everything inside the usercontrol. That way the normal controls would postback in an ajaxy way too, apparently solving the ‘The page is busy’ message.

We’ll be testing this solution over the next few days. If any problems pop up, I’ll keep you posted.