Multiple Modal Popups with the ASP.NET Ajax Toolkit

At the moment I’m building a CMS with ASP.NET, ASP.NET Ajax and the ASP.NET Ajax Toolkit. One of the great features that the AJAX Toolkit provides us is the possibility of adding modal popups.

I’m using them for gridviews that contains a lot of columns, and cannot be displayed in the page without the horizontal scroll. My solution for that is displaying the more important data, and then, when a row is selected, a detailform is displayed with all the data in a popup panel. My solution is based on Matt Berseth excellent post: Master-Detail with the GridView, DetailsView and ModalPopup Controls. This solves the problem of editing rows, but what happens when we want to add a new one?

The gridview control doesn’t have a built-in way of adding new items. One standard way of solving this is adding the add form in the footer of the gridview, but we don’t have the horizontal space needed for it if we have more data than the displayed on the gridview!

I planned to add a “Add element” link at my page, and adding a new popup for adding data. But it didn’t worked. My search of “multiple modal popups” didn’t give me any solutions. So I looked at what was happening there, and I created a simple test page like this:

    <asp:LinkButton ID="lnk" runat="server" Text="hi"></asp:LinkButton>
    <br />
    <asp:LinkButton ID="lnk2" runat="server" Text="hi2"></asp:LinkButton>
    <ajax:ModalPopupExtender ID="mpe" runat="server" TargetControlID="lnk" PopupControlID="pnl"
        CancelControlID="close" />
    <ajax:ModalPopupExtender ID="mpe2" runat="server" TargetControlID="lnk2" PopupControlID="pnl2"
        CancelControlID="close2" />
    <asp:Panel ID="pnl" runat="server" CssClass="popupPanel">
        <div>
            Hi!!!
        </div>
        <asp:Button ID="close" runat="server" Text="Close" />
    </asp:Panel>
    <asp:Panel ID="pnl2" runat="server" CssClass="popupPanel">
        <div>
            Hi2222!!!
        </div>
        <asp:Button ID="close2" runat="server" Text="Close" />
    </asp:Panel>

If I show the first panel, and hide it, the second panel is never shown.
The problem is that, in the generated HTML code, the second panel is a child of the first one, instead of being at the same level on the DOM tree.

IMHO this is an Ajax Control Toolkit bug, and I hope that I’ll find time, and I will take a look and send a patch. But for now, I used a workaround. I placed the modal popup panels inside of another one wrapping each one, and it did the trick.

Hope this helps somebody.

UPDATE 2008/03/03: Merenzo has resolved the mistery. See the comments.