popup grid with PopupControlExtender ajax control

//markup main.aspx page put gridview inside update panel for not post back

<div>
<asp:ScriptManager ID=”ScriptManager1″ runat=”server”>
</asp:ScriptManager>
<asp:UpdatePanel ID=”UpdatePanel1″ runat=”server”>
<ContentTemplate>
<asp:GridView ID=”GridView1″ runat=”server” AutoGenerateColumns=”False”
BorderColor=”#336699″ BorderStyle=”Solid” BorderWidth=”1px”
CellPadding=”3″ Font-Names=”Verdana” Font-Size=”10pt”
onrowcreated=”GridView1_RowCreated”>
<Columns>
<asp:BoundField DataField=”Id” HeaderText=”ID” />
<asp:BoundField DataField=”Title” HeaderText=”Title” />
<asp:TemplateField ItemStyle-Width=”40″ ItemStyle-HorizontalAlign=”Right”>
<ItemTemplate>
<asp:Image ID=”Image1″ runat=”server” ImageUrl=”~/magnify.gif” />
<asp:PopupControlExtender ID=”PopupControlExtender1″ runat=”server”
PopupControlID=”Panel1″
TargetControlID=”Image1″
DynamicContextKey='<%# Eval(“Id”) %>’
DynamicControlID=”Panel1″
DynamicServiceMethod=”GetDynamicContent” Position=”Bottom”>
</asp:PopupControlExtender>
<asp:Panel ID=”Panel1″ runat=”server”> </asp:Panel>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<HeaderStyle BackColor=”#336699″ ForeColor=”White” />
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>

</div>

//main.aspx.cs file

protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
LoadData();
}
}

private void LoadData()
{
string constr = “Data Source=SYNDLF371;Initial Catalog=mydata;Integrated Security=True”;
string query = “SELECT Id, Title FROM MyData”;
SqlDataAdapter da = new SqlDataAdapter(query, constr);
DataTable table = new DataTable();
da.Fill(table);
GridView1.DataSource = table;
GridView1.DataBind();
}

protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
PopupControlExtender pce = e.Row.FindControl(“PopupControlExtender1”) as PopupControlExtender;
string behaviorID = “pce_” + e.Row.RowIndex;
pce.BehaviorID = behaviorID;
Image img = (Image)e.Row.FindControl(“Image1”);
string OnMouseOverScript = string.Format(“$find(‘{0}’).showPopup();”, behaviorID);
string OnMouseOutScript = string.Format(“$find(‘{0}’).hidePopup();”, behaviorID);
img.Attributes.Add(“onmouseover”, OnMouseOverScript);
img.Attributes.Add(“onmouseout”, OnMouseOutScript);

//e.Row.Attributes.Add(“onmouseover”, OnMouseOverScript);
//e.Row.Attributes.Add(“onmouseout”, OnMouseOutScript);
}
}
//very important web method
[System.Web.Services.WebMethodAttribute(), System.Web.Script.Services.ScriptMethodAttribute()]
public static string GetDynamicContent(string contextKey)
{
string constr = “Data Source=SYNDLF371;Initial Catalog=mydata;Integrated Security=True”;
string query = “SELECT Detail FROM MyData WHERE Id = ” + contextKey;
SqlDataAdapter da = new SqlDataAdapter(query, constr);
DataTable table = new DataTable();
da.Fill(table);
StringBuilder b = new StringBuilder();
b.Append(“<table style=’background-color:#f3f3f3; border: #336699 3px solid; “);
b.Append(“width:350px; font-size:10pt; font-family:Verdana;’ cellspacing=’0′ cellpadding=’3′>”);
b.Append(“<tr><td colspan=’3′ style=’background-color:#336699; color:white;’>”);
b.Append(“<b>PopUp Box</b>”); b.Append(“</td></tr>”);
b.Append(“<tr><td style=’width:80px;’><b>Details</b></td>”);
b.Append(“<tr>”);
b.Append(“<td>” + table.Rows[0][“Detail”].ToString() + “</td>”);
b.Append(“</tr>”);
b.Append(“</table>”);
return b.ToString();
}

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s