Ajax ModalPopupExtender is not firing

Question

I am having an issue getting the popup to appear at all. Once I can get the popup to show at all, I can troubleshoot from there. Basically, I have a gridview and I want a detailsview to appear in a popup when I select a link. This is all being done using an objectdatasource.

Note:The grid and the detailsview work just fine if I don't try to use a modalpopupextender.

My question is whether anyone can tell me what I am doing wrong in my code, or offer a better solution for implementing the ajax modalpopupextender.

~This is a shortened version of my markup~

<asp:Content ID="Content2" ContentPlaceHolderID="MasterContentPlaceHolder" Runat="Server">
<asp:ScriptManager ID="script1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="updatePanel" runat="server" UpdateMode="Conditional">
<ContentTemplate>
 <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" 
    DataSourceID="ObjectDataSource1" AllowSorting="True"
    CssClass="grid" CaptionAlign="Left" DataKeyNames="APP,ENV" OnSelectedIndexChanged="GridView1_SelectedIndexChanged" 
    >
    <Columns>
        <asp:TemplateField ShowHeader="False" Visible = "false">
            <ItemTemplate>
                <asp:LinkButton ID="LinkButton1" runat="server"  CausesValidation="False" 
                    CommandName="Select" Text="Select" Visible ="false"></asp:LinkButton>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="APP" SortExpression="APP">
            <EditItemTemplate>
                <asp:TextBox ID="TextBox1" runat="server" Visible = "false" Text='<%# Bind("APP") %>'></asp:TextBox>
            </EditItemTemplate>
            <ItemTemplate>
                <asp:LinkButton ID="Label1" runat="server" CausesValidation ="false" CommandName="Select" Text='<%# Bind("APP") %>'></asp:LinkButton>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField DataField="ENV" HeaderText="ENV" 
            SortExpression="ENV" />
    </Columns>
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
<asp:Panel ID="pnlPopup" runat="server" Width= "700px" style="display:none;">
<asp:UpdatePanel ID="detailspanel" runat="server" UpdateMode="Conditional">
<ContentTemplate>
    <asp:Button ID="btnShowPopup" runat="server" style="display:none" />
    <ajaxToolkit:ModalPopupExtender ID="mdlPopup" runat="server"
        TargetControlID="btnShowPopup" PopupControlID="pnlPopup"
        />
               <asp:DetailsView ID="DetailsView1" runat="server" AutoGenerateRows="False" 
    DataSourceID="ObjectDataSource2" CssClass="detail" 
    >
    <Fields>
        <asp:BoundField DataField="APP" HeaderText="APP" 
            SortExpression="APP" />
        <asp:BoundField DataField="ENV" HeaderText="ENV" 
            SortExpression="ENV" />
        <asp:TemplateField ShowHeader="False">
            <EditItemTemplate>
                <asp:LinkButton ID="LinkButton1" runat="server" CausesValidation="True" 
                    CommandName="Update" Text="Update"></asp:LinkButton>
                &nbsp;<asp:LinkButton ID="LinkButton2" runat="server" CausesValidation="False" 
                    CommandName="Cancel" Text="Cancel"></asp:LinkButton>
            </EditItemTemplate>
            <ItemTemplate>
                <asp:LinkButton ID="LinkButton1" runat="server" CausesValidation="False" 
                    CommandName="Select" Text="Edit"></asp:LinkButton>
            </ItemTemplate>
        </asp:TemplateField>
    </Fields>
</asp:DetailsView>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
<asp:ObjectDataSource ID="ObjectDataSource2" runat="server" 
    SelectMethod="GetApplication" 
    TypeName="Applications.BusinessServices.AppService" 
     DataObjectTypeName="Applications.Entities.Application" 
     UpdateMethod="Update">
    <SelectParameters>
        <asp:ControlParameter ControlID="GridView1" Name="APP" 
            PropertyName="SelectedDataKey[0]" Type="String" DefaultValue="Null" />
        <asp:ControlParameter ControlID="GridView1" Name="ENV" 
            PropertyName="SelectedDataKey[1]" Type="String" DefaultValue=" Null" />
    </SelectParameters>
</asp:ObjectDataSource>
    <asp:ObjectDataSource ID="ObjectDataSource1" runat="server" 
    SelectMethod="GetAllApplication" 
    TypeName="Applications.BusinessServices.AppAvailService" SortParameterName="sortColumn">
</asp:ObjectDataSource>
</asp:Content>

To sum it up, when the linkbutton label1 is clicked, the modalpopup should appear and show the detailsview.

~This is my codebehind~

protected void Page_Load(object sender, EventArgs e)
{
    if (GridView1.SelectedIndex == -1)
    {
        GridView1.EnablePersistedSelection = true;         
    }
}
protected void  GridView1_SelectedIndexChanged(object sender, EventArgs e)
{
    this.DetailsView1.Visible = true;
    this.DetailsView1.DataBind();
    this.detailspanel.Update();
    this.mdlPopup.Show();

}

}

I have confirmed via debugging that that mdlPopup.Show() does execute when the link is clicked, and visual studio does not register any errors. It is simply that nothing happens.

Also, Btnshowpopup is just a fake button. The popup should still show if I call mdlpopup.show(); from codebehind. Even if set the panel and btnshowpopupp to visible and then click the button, nothing still happens.

Any help would be appreciated. Thanks.

Answer 1

I've resolved my issue. I figured that I would share it for anyone that has a similar issue.

I've seen 12 examples on various sites that show this not to be an issue, but I took the modalpopupextender outside of the updatepanel and the issue was resolved. So at least for me, the modalpopupextender has to be outside of the updatepanel in order for it to fire.