Home > AJAX, ASP.Net > AJAX PopupControl Extender to Display Row Details with Gridview

AJAX PopupControl Extender to Display Row Details with Gridview


Hi all ,

try this example to use AJAX PopupControl Extender to Display Row Details with Gridview

Step1 :- create a new website and add new web page

Step2 :- in Web page drag ScriptManager , Gridview , AJAX Popup Extender and Panel control from toolbox

so your page will be like this


<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
       
        <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="ProductID" HeaderText="Product ID" />
              <asp:BoundField DataField="ProductName" HeaderText="Product Name" />
              <asp:TemplateField ItemStyle-Width="40" ItemStyle-HorizontalAlign="Right">
                 <ItemTemplate>
                    <asp:Image ID="Image1" runat="server" ImageUrl="~/page_topic_magnify.png" />
                    <cc1:PopupControlExtender ID="PopupControlExtender1" runat="server"
                       PopupControlID="Panel1"
                       TargetControlID="Image1"
                       DynamicContextKey='<%# Eval("ProductID") %>'
                       DynamicControlID="Panel1"
                       DynamicServiceMethod="GetDynamicContent" Position="Bottom">
                    </cc1:PopupControlExtender>
                    <asp:Panel ID="Panel1" runat="server"> </asp:Panel>
                 </ItemTemplate>
              </asp:TemplateField>
           </Columns>
           <HeaderStyle BackColor="#336699" ForeColor="White" />
        </asp:GridView>
    </div>
    </form>
</body>
</html>

Step3 :- in code behind add the following code


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Data;
using AjaxControlToolkit;
using System.Text;

public partial class _Default : System.Web.UI.Page
{
    private void LoadData()
    {
        string constr = "Data Source=.;Initial Catalog=Northwind;Integrated Security=True";
        string query = "SELECT ProductID, ProductName FROM Products";
        SqlDataAdapter da = new SqlDataAdapter(query, constr);
        DataTable table = new DataTable();
        da.Fill(table);
        GridView1.DataSource = table;
        GridView1.DataBind();
    }

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

    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);
        }
    }

    [System.Web.Services.WebMethodAttribute(), System.Web.Script.Services.ScriptMethodAttribute()]
    public static string GetDynamicContent(string contextKey)
    {
        string constr = "Data Source=.;Initial Catalog=Northwind;Integrated Security=True";
        string query = "SELECT UnitPrice, UnitsInStock,UnitsOnOrder FROM Products WHERE ProductID = " + 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>Product Details</b>"); b.Append("</td></tr>");
        b.Append("<tr><td style='width:80px;'><b>Unit Price</b></td>");
        b.Append("<td style='width:80px;'><b>Stock</b></td>");
        b.Append("<td><b>Units On Order</b></td></tr>");
        b.Append("<tr>");
        b.Append("<td>$" + table.Rows[0]["UnitPrice"].ToString() + "</td>");
        b.Append("<td>" + table.Rows[0]["UnitsInStock"].ToString() + "</td>");
        b.Append("<td>" + table.Rows[0]["UnitsOnOrder"].ToString() + "</td>");
        b.Append("</tr>");
        b.Append("</table>");
        return b.ToString();
    }
}

Hope this helps

Good Luck

Advertisements
Categories: AJAX, ASP.Net
  1. Marco
    July 7, 2010 at 1:46 pm

    Good job,
    but this make a postback,
    and the popup window is auto hidden.
    How can resolve it ?

  2. yasserzaid
    July 12, 2010 at 9:13 pm

    @Marco :- Thank you for your comment but you can add Gridview inside UpdatePanel Control which will work without Postpack 🙂 hope my post helps you

  3. chandu
    October 1, 2010 at 12:38 pm

    i got the following error on mouse over the gridview

    web service called failed :500

    can u mail me the details to over come that error

    • alyaa
      December 8, 2010 at 8:41 am

      did you know how to solve this problem? I am facing the same issue now

      Thanks

  4. Shivam Gupta
    October 7, 2010 at 1:44 pm

    I have three grid view in a page, i want ot use AJAX PopupControl Extender to Display Row Details with each gridview, as user want.

  5. yasserzaid
    October 14, 2010 at 8:12 pm

    @Shivam Gupta :- you can apply it to any of your Gridview

  6. yasserzaid
    December 14, 2010 at 7:15 am

    @chandu ,alyaa :- i tried the example and it works well with me please try it again and let me know … thanks

  7. dark dusky
    April 20, 2011 at 2:56 pm

    I am also getting web service call failed 500 error. I have tested the webservice in browser and it works by itself. When I replace the: string.Format(“$find(‘{0}’).showPopup();”, behaviorID); with a simple alert – the error is gone – although it does not show popup obviously. Can you explain what $find does and anything else it needs to work which I might have left out?

  8. venu gopal reddy
    May 27, 2011 at 9:54 am

    the same code i saw in many sites,then who copied whose data……………..

  9. puneet
    July 3, 2011 at 4:00 pm

    i also want to know that what $find does if anybody have pdf file regarding asp.net with ajax please mail me at puneetgupta417@gmail.com

  10. September 2, 2011 at 1:23 pm

    I am getting error $find(“pce_0”) is null

  11. Jigar Patel
    March 16, 2013 at 12:12 pm

    Good Job

  12. October 21, 2015 at 7:23 am

    When I click the link button only then I am able to see the data in popup. On hover it is not visible. Please Help!

  1. No trackbacks yet.

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

%d bloggers like this: