ModalPopupExtender in SharePoint – part II

As I said earlier, we didn’t test our solution to using the ModalPopupExtender in SharePoint in all situations. Today we made a start to do so. To indicate our successrate: we now use window.showModalDialog with some extra pages…

Lets go through some of the problems we encountered.

  • Placing an UpdatePanel around the entire UserControl (with default settings) makes that the entire UserControl is posted back, even when it is a control inside a nested UpdatePanel that posts back. The ASP.NET controls have no problem with this, but the SharePoint InputFormTextBox set to RichText does. The toolbars are not rendered, and the entire HTML is shown. Setting ChildrenAsTriggers would disable this behaviour (it does with default ASP.NET controls), because in that case only the nested UpdatePanel is posted back. Unfortunately we didn’t get to test that.
  • The SharePoint page layout doesn’t render properly when using the XHTML Transitional doctype. Probably nothing a redesign of the masterpage (and maybe some controls) can’t handle, but it seems you need time and budget for that. ;)
  • The background wasn’t always completely grayed out using the BackgroundCssClass. Sometimes a ribbon of say 10 pixels was shown normal, sometimes the entire background was displayed normal. And clickable! That’s not what we would like to use a modal popup for.

Especially the last problem made us eventually switch back to an oldskool JavaScript solution, although we did mix it with some UpdatePanels. The Ajax modal popup sometimes did its job, but not all of the time. We couldn’t quite put our finger on it. When a solution doesn’t feel stable and there isn’t much time, you should / sometimes have to revert to proven technology. The problems we encountered are solvable, or at least I think so. We didn’t have time to prove they are. At least not this time… ;)

Getting the ModalPopupExtender to work in SharePoint 2007

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:

* 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.