How to use a PopupControlExtender to popup an ASP.NET control other than a PANEL?

Question

The PopupControlExtender can popup many ASP.NET controls, but only examples popup a panel can be found on Internet... How to popup other controls such as a gridview?

e.g. I am going to get a DataTable from database by MachineNo and set the DataTable as the datasource of GridView2. Then I want to popup GridView2 that displaying the information of that Machine when mouse is over the imagebutton. How to write the code behind?

<asp:GridView ID="GridView1" ...onrowcreated="GridView1_RowCreated">
<Columns>
  <asp:BoundField HeaderText="MachineNo" DataField="MachineNo"/>
  <asp:TemplateField>
    <ItemTemplate>
      <asp:ImageButton ID="ImageButton1" .../>
      <cc1:PopupControlExtender ID="PopupControlExtender1" runat="server" 
           PopupControlID="GridView2" 
           TargetControlID="ImageButtonl" 
           DynamicContextKey='<%# Eval("MachineNo") %>' 
           DynamicControlID="GridView2" 
           DynamicServiceMethod="GetDynamicContent" ???>
      </cc1:PopupControlExtender>
    </ItemTemplate>
  </asp:TemplateField>
</Columns>
</asp:GridView>

<asp:GridView ID="GridView2" ...>...

protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e){
if (e.Row.RowType == DataControlRowType.DataRow)
{
    PopupControlExtender PopupControlExtender1 = (PopupControlExtender)e.Row.FindControl("PopupControlExtender1");
    string behaviorID = "PopupControlExtender1_" + e.Row.RowIndex;
    PopupControlExtender1.BehaviorID = behaviorID;
    ImageButton ImageButton1 = (ImageButton)e.Row.FindControl("ImageButton1");

    string OnMouseOverScript = string.Format("$find('{0}').showPopup();", behaviorID);
    string OnMouseOutScript = string.Format("$find('{0}').hidePopup();", behaviorID);

    ImageButton1.Attributes.Add("onmouseover", OnMouseOverScript);
    ImageButton1.Attributes.Add("onmouseout", OnMouseOutScript);
}}

Same as panel control just use the gridview control id instead of panel control id. First try and in case of issue ask here. — Mahesh, Feb 17 '15 at 07:22
http://www.ezzylearning.com/tutorial/display-gridview-row-details-using-asp-net-ajax-popup-control for panel control, take this article for example, he builds html string for the tabular output in the popup window by GetDynamicContent() Where can I put methods like gridview.datasource and gridview.databind to build the gridview? After that how can i popup it? — Lucius, Feb 17 '15 at 07:47
Instead of creating the content on that method `GetDynamicContent()` you can just bind the datasource on that method to the your popup gridview. — Mahesh, Feb 17 '15 at 07:50
I followed your advice and encountered a new problem: as method GetDynamicContent() is a static method, it cannot access GridView2. Therefore I cannot bind GridView2 to the data. — Lucius, Feb 17 '15 at 08:38
Ok. try to bind that gidview to the datasource in your `GridView1_RowCreated` method — Mahesh, Feb 17 '15 at 08:54
GridView1_RowCreated is used to add showPopup-related attributes to imagebutton, which calls the web service. The gridview databind process should be in the webservice instead of GridView1_RowCreated — Lucius, Feb 17 '15 at 10:11
Finally I gave up. Maybe popping up a panel and passing in a long CSS string is the best way so far... — Lucius, Feb 17 '15 at 10:16

score 0 · Answer 1 · answered Apr 23 '19 at 14:49

I have just read your code. and my side I get success for showing up popup like this way

protected void gvTemplates_RowCreated(object sender, GridViewRowEventArgs e)
    {
        //GridView gv1 = (GridView)sender;
        //foreach (GridViewRow item in gv1.Rows)
        //{
            if (e.Row.RowType == DataControlRowType.DataRow)
            {
                PopupControlExtender pce = e.Row.FindControl("PopupControlExtender1") as PopupControlExtender;
                string behaviorID = "pce_" + e.Row.RowIndex;
                pce.BehaviorID = behaviorID;
                Panel pnl = (Panel)e.Row.FindControl("Panel2");
                string OnMouseOverScript = string.Format("$find('{0}').showPopup();", behaviorID);
                string OnMouseOutScript = string.Format("$find('{0}').hidePopup();", behaviorID);
                pnl.Attributes.Add("onmouseover", OnMouseOverScript);
                pnl.Attributes.Add("onmouseout", OnMouseOutScript);
            }
        //}
    }

[System.Web.Services.WebMethodAttribute(), System.Web.Script.Services.ScriptMethodAttribute()]
    public static string GetDynamicContent(string contextKey)
    {
        StringBuilder b = new StringBuilder();
        b.Append("<table style='background-color:#f3f3f3; border: #4DB3A4 2px solid; ");
        b.Append("width:100px;height:100px; font-size:8pt; font-family:'lucida grande', tahoma, verdana, arial, sans-serif;' cellspacing='0' cellpadding='3'>");
        b.Append("<tr><td colspan='3' style='background-color:white;'>");
        b.Append(contextKey);
        b.Append("</td></tr>");
        b.Append("</table>");
        return b.ToString();
    }

How to use a PopupControlExtender to popup an ASP.NET control other than a PANEL?

1 Answers1