Asp ModalPopupExtender not displaying detail view

Question

I am using a ModalPopupExtender within an updatePanel to show a detailView when a user selects a "Details" Button within a GridView.

The problem is that when the button is selected the popup is not being displayed. I have stepped through the code and the mdlPopup.Show() method is being executed but the popup does not "Show" Could someone perhaps help me out with what is happening? Here is my Code:

<asp:ObjectDataSource ID="ObjectDataSource1" runat="server" SelectMethod="GetRequests"
    TypeName="RequestDAL" SortParameterName="SortExpression"></asp:ObjectDataSource>
<asp:ObjectDataSource ID="ObjectDataSourceDetails" runat="server" SelectMethod="GetRequestsDetail"
    OnSelecting="OdsDetail_Selecting" TypeName="RequestDAL"></asp:ObjectDataSource>

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="RequestID"
    DataSourceID="ObjectDataSource1" EnableModelValidation="True" AllowSorting="True"
    CellPadding="10" ForeColor="#333333" GridLines="None" OnSelectedIndexChanged="gv_SelectedIndexChanged">
    <AlternatingRowStyle BackColor="White" />
    <Columns>
        <asp:CommandField ShowSelectButton="True" />
        <asp:BoundField DataField="DateSubmit" HeaderText="DateSubmit" SortExpression="DateSubmit" />
        <asp:BoundField DataField="Name" HeaderText="Name" SortExpression="lName" />
        <asp:BoundField DataField="FirstDate" HeaderText="Date" SortExpression="FirstDate" />
        <asp:BoundField DataField="BeginTime" HeaderText="Begin Time" SortExpression="beginTime" />
        <asp:BoundField DataField="EndTime" HeaderText="End Time" SortExpression="endTime" />
        <asp:BoundField DataField="Lab" HeaderText="Lab" SortExpression="room" />
        <asp:BoundField DataField="ClassName" HeaderText="Class" SortExpression="Class" />
        <asp:BoundField DataField="Semester" HeaderText="Semester" SortExpression="term" />
        <asp:BoundField DataField="RequestID" HeaderText="RequestID" SortExpression="id" />
        <asp:TemplateField>
            <ItemTemplate>
                <asp:LinkButton ID="btnDetails" runat="server" Text="Details" CommandName="Select" /></ItemTemplate>
        </asp:TemplateField>
    </Columns>
    <EditRowStyle BackColor="#2461BF" />
    <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
    <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
    <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
    <RowStyle BackColor="#EFF3FB" />
    <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
</asp:GridView>


<asp:Panel ID="pnlPopup" runat="server" Style="display: none" Width="500px">
    <asp:UpdatePanel ID="updatePnlRequestDetail" runat="server" UpdateMode="Conditional">
        <ContentTemplate>
            <asp:Button ID="btnShowPopup" runat="server" Style="display: none" />
            <Ajax:ModalPopupExtender ID="mdlPopup" runat="server" TargetControlID="btnShowPopup"
                PopupControlID="pnlPopup" CancelControlID="btnClose" BackgroundCssClass="modalBackground" />
            <asp:Label ID="lblRequestDetail" runat="server" Text="Request Detail" BackColor="LightBlue"
                Width="95%"></asp:Label>
            <asp:DetailsView ID="dvRequestDetail" DataSourceID="ObjectDataSourceDetails" runat="server"
                DefaultMode="Edit" Width="95%" BackColor="White" Visible="false">
                <Fields>
                <asp:BoundField HeaderText="Id"  DataField="RequestID" /></Fields>
            </asp:DetailsView>
            <asp:LinkButton runat="server" ID="btnClose" Text="Close" CausesValidation="false"></asp:LinkButton>
        </ContentTemplate>
    </asp:UpdatePanel>
</asp:Panel>


protected void gv_SelectedIndexChanged(object sender, EventArgs e)    {

    //show the detail view to render
    dvRequestDetail.Visible = true;    
    // force the databinding
    dvRequestDetail.DataBind();
    // update the detail panel
    updatePnlRequestDetail.Update();
    //show the popup
    mdlPopup.Show();
}
protected void OdsDetail_Selecting(object sender, ObjectDataSourceSelectingEventArgs e)
{
    try
    {
        e.InputParameters["id"] = Convert.ToString(this.GridView1.DataKeys[this.GridView1.SelectedIndex].Value);

    }
    catch(Exception ex)
    {
        throw new Exception(ex.Message);
    }           
}

This is all taken from a tutorial I found for using Modal Popup extenders with ObjectDataSources http://mattberseth.com/blog/2008/04/masterdetail_with_the_gridview.html

Answer 1

2 thing I whould do:

1. set your GridView as a AsyncPostBackTrigger for the popup UpdatePanel.
2. put the TargetControl and the ModalPopupExtender outside of the PopupControl Panel.

<asp:Panel ID="pnlPopup" runat="server" Style="display: none" Width="500px">
    <asp:UpdatePanel ID="updatePnlRequestDetail" runat="server" UpdateMode="Conditional">
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="GridView1" />
        </Triggers>  
        <ContentTemplate>
            <asp:Label ID="lblRequestDetail" runat="server" Text="Request Detail" BackColor="LightBlue" Width="95%"></asp:Label>
            <asp:DetailsView ID="dvRequestDetail" DataSourceID="ObjectDataSourceDetails" runat="server" DefaultMode="Edit" Width="95%" BackColor="White" Visible="false">
                <Fields>
                    <asp:BoundField HeaderText="Id"  DataField="RequestID" />
                </Fields>
            </asp:DetailsView>
            <asp:LinkButton runat="server" ID="btnClose" Text="Close" CausesValidation="false"></asp:LinkButton>
        </ContentTemplate>
    </asp:UpdatePanel>
</asp:Panel>
<asp:Button ID="btnShowPopup" runat="server" Style="display: none" />
<Ajax:ModalPopupExtender ID="mdlPopup" runat="server" TargetControlID="btnShowPopup" PopupControlID="pnlPopup" CancelControlID="btnClose" BackgroundCssClass="modalBackground" />