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.

Modificando un textarea desde javascript

Para modificar en Javascript el contenido de un textarea, podemos usar las propiedades selectionStart y selectionEnd que tenemos disponibles en Firefox y Opera.
Sin embargo, éstas no están disponibles en IE, por lo que debemos utilizar un feo truco para añadirlas.
Ahí va el código:

function UglyFixForSelectionStartAndSelectionEndForIE(id) {
    var element = $get(id);
    if(document.selection) {
        // The current selection 
        var range = document.selection.createRange();
        // We'll use this as a 'dummy'
        var stored_range = range.duplicate();
        // Select all text 
        stored_range.moveToElementText( element );
        // Now move 'dummy' end point to end point of original range 
        stored_range.setEndPoint('EndToEnd', range );
        // Now we can calculate start and end points 
        element.selectionStart = stored_range.text.length - range.text.length;
        element.selectionEnd = element.selectionStart + range.text.length;
    }
}

Y si estamos usando el ASP.NET Ajax Control Toolkit, bastará con utilizar:

        var element = this.get_element();
        if (Sys.Browser.agent === Sys.Browser.InternetExplorer)
            UglyFixForSelectionStartAndSelectionEndForIE(element.id);
        var start = element.selectionStart;
        var end = element.selectionEnd;
        var length = element.textLength;

La función es original de Stickblog