ASP.net: how Can i display a gridview inside ajax modalpopupextender

Question

I do not know how to make it work ...... i am using ASP.net with C# and i am designing a search user control

<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<asp:UpdatePanel runat="server">
  <ContentTemplate>
    <asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" 
    TargetControlID="btnFind" CancelControlID="btnCancel" PopupControlID="Panel" 
    PopupDragHandleControlID="Panel" BackgroundCssClass="modalBackground" </asp:ModalPopupExtender>
    <asp:Panel ID="Panel" runat="server" CssClass="ModalWindow">


    <asp:GridView ID="grdInfo" runat="server" >
        <Columns>
            <asp:TemplateField HeaderText="Select">
                <ItemTemplate>
                    <asp:Button ID="Button1" runat="server" CommandName="Select" Text="Button" />
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>

   <br />
       <asp:Button ID="btnCancel" runat="server" Text="Cancel" />

    </asp:Panel>
  </ContentTemplate>
 </asp:UpdatePanel>

Answer 1

I have a similar ModalPopup which works like a charm even with asynchronous postbacks. It's part of an UserControl, therefore i only show the relevant part(reduced) + your GridView. It would have helped if you had said what problems you exactly have. Where did you bind your Grid to its DataSource?

<asp:ModalPopupExtender ID="ChargeFilterModalDialogExtender" runat="server" TargetControlID="BtnShowDialog" CancelControlID="BtnCloseChargeFilterControl" Drag="false" PopupControlID="Dialog_ChargeFilter" Enabled="True"   BackgroundCssClass="modalBackground" />
<asp:Button ID="BtnShowDialog" Style="display: none" runat="server" Width="120" Text="Filter Charges" ToolTip="show Chargefilter-Dialog" />
<asp:Panel id="Dialog_ChargeFilter" CssClass="modalPopup" runat="server" >
    <asp:Panel ID="DialogHeaderFrame"  CssClass="DialogHeaderFrame" runat="server">      
        <asp:Panel ID="DialogHeader"  runat="server" CssClass="DialogHeader" >
           &nbsp;<asp:Label ID="LblPopupHeader" runat="server" Text="Charge-Filter">
        </asp:Panel>
    </asp:Panel>  
    <asp:UpdatePanel ID="UpdGrdCharge" runat="server" UpdateMode="conditional" ChildrenAsTriggers="false"  >
        <ContentTemplate>
            <asp:Button ClientIDMode="Static" ID="BtnCloseChargeFilterControl" Text="close filter" ToolTip="close filter-dialog" CausesValidation="false" Width="150px" runat="server" /><br />
            <asp:GridView ID="grdInfo" runat="server" >
                <Columns>
                    <asp:TemplateField HeaderText="Select">
                        <ItemTemplate>
                            <asp:Button ID="Button1" runat="server" CommandName="Select" Text="Button" />
                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>
        </ContentTemplate> 
     </asp:UpdatePanel> 
</asp:Panel>

and this is my CSS(should be irrelevant, only for sake of completeness):

.modalBackground
{
    background-color:silver;
    filter: alpha(opacity=60);
    opacity: 0.6;      
}

.modalPopup
{
    background-color:White;
    border: 1px solid #4C3C1B;
    padding: 5px;
}

.DialogHeader
{
    background-color:#002D64;  
    color:White;
    height:30px; 
    font-size:medium;
    font-style:normal;
    font-weight:bold;
    vertical-align:middle;
    display: table-cell;
}

.DialogHeaderFrame
{
    width:100%;
    cursor:default;
    background-color:white;  
    display:table;
}

Answer 2

Did you guys have to manually update your panel? That's the only way I could get mine to work. Basically when I hit the image button that unhides the popup I have to

gridview.databind()
updatepanel.update()
popup.show()

Anything I did wrong?