I am using the ModalPopupExtender....
Is it possible to have the panel that this will pop-up to be outside the container that the ModalPopupExtender is in?
My ModalPopupExtender is in an itemtemplate within a gridview... if i have the panel outside the itemtemplate container then it does not show up, but the background does go gray (and unclickable)
thanks
Hi Raklos,
My understanding of your issue is that you want put the popped up Panel outside of the ItemTemplate container of the GridView. If I have misunderstood, please feel free to let me know.
Generally, ModalPopupExtender and its associated Panel should be put in the same container or there's a compiler error. In your case, I think the best solution is putting your ModalPopupExtender and its associated Panel all outside the GridView. Then make the ModalPopupExtender's TargetControlID property associate to a hidden Button. Now when the user click on the LinkButton or some other controls we can call a Javascript and make the Panel shown. Here is the sample.
<%@. Page Language="C#" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><script runat="server"> protected void Page_Load(object sender, EventArgs e) { //Attach a Javascript funtion to the LinkButton. LinkButton myLinkButton; for (int i = 0; i < GridView1.Rows.Count; i++) { myLinkButton = (LinkButton)GridView1.Rows[i].Cells[4].FindControl("LinkButton1"); myLinkButton.Attributes.Add("onclick", "shopModalPopup('" + GridView1.Rows[i].Cells[0].Text + "');return false;"); } } </script><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title>Untitled Page</title> <style> .modalBackground { background-color:Gray; filter:alpha(opacity=70); opacity:0.7; } .modalPopup { background-color:#FFD9D5; border-width:3px; border-style:solid; border-color:Gray; padding:3px; width:250px; } </style></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="EmployeeID" DataSourceID="SqlDataSource1"> <Columns> <asp:BoundField DataField="EmployeeID" HeaderText="EmployeeID" InsertVisible="False" ReadOnly="True" SortExpression="EmployeeID" ItemStyle-Width="0" /> <asp:BoundField DataField="LastName" HeaderText="LastName" SortExpression="LastName" /> <asp:BoundField DataField="FirstName" HeaderText="FirstName" SortExpression="FirstName" /> <asp:BoundField DataField="Title" HeaderText="Title" SortExpression="Title" /> <asp:TemplateField> <ItemTemplate> <asp:LinkButton ID="LinkButton1" runat="server">Click On Me</asp:LinkButton> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NORTHWNDConnectionString%>" SelectCommand="SELECT [EmployeeID], [LastName], [FirstName], [Title] FROM [Employees]"> </asp:SqlDataSource> <asp:Panel ID="Panel1" runat="server" CssClass="modalPopup" Height="200px" Width="300px" style="display:none"> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> EmployeeID:<asp:TextBox ID="tbEmployeeID" runat="server"></asp:TextBox> <br/> Reason:<asp:TextBox ID="tbReason" runat="server"></asp:TextBox> </ContentTemplate> </asp:UpdatePanel> <asp:Button ID="btnCancel" runat="server" Text="Cancel" /> </asp:Panel> <div style="display: none"> <asp:Button ID="Button1" runat="server" Text="Button" /></div> <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="Button1" PopupControlID="Panel1" CancelControlID="btnCancel" BackgroundCssClass="modalBackground"> </ajaxToolkit:ModalPopupExtender> <script type="text/javascript" language="javascript"> function shopModalPopup(employeeID){ //show the ModalPopupExtender $get("<%=tbEmployeeID.ClientID%>").value = employeeID; $get("<%=tbReason.ClientID%>").value =""; $find("<%=ModalPopupExtender1.ClientID%>").show(); } </script> </form></body></html>I hope this help.
Best regards,
Jonathan
No comments:
Post a Comment