CODEWITHSUNDEEP
asp.netgridviewmouseover
Hitesh Gawhade
Hitesh Gawhade

Reputation: 181

Display details on moving mouse over a row in gridview?

I am using a gridview where I need to show specific details in a table/grid in a pop up window , if I point my mouse over each row. I have tried following code for the same which is working but displays only one row in pop up.:

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


 [System.Web.Services.WebMethodAttribute(),
    System.Web.Script.Services.ScriptMethodAttribute()]
    public static string GetDynamicContent(string contextKey)
    {
        string constr = ConfigurationSettings.AppSettings["ConnectionInfo"];
        SqlConnection con = new SqlConnection(constr);
        con.Open();
        string query = "SELECT * FROM Table1 WHERE field1 = '" + contextKey + "' ";

        SqlDataAdapter da = new SqlDataAdapter(query, con);
        DataTable table = new DataTable();

        da.Fill(table);

        StringBuilder b = new StringBuilder();
    b.Append("<table border='1' style='background-color:#f3f3f3; ");
    b.Append("width:350px; font-size:10pt; font-family:Verdana;' cellspacing='0' cellpadding='3'>");

    b.Append("<tr style = 'background-image: url(Images/HeaderGlassBlack.jpg); background-repeat:repeat; color:#FFC700; '><td style='width:50px;'><b>Employee</b></td>");
    b.Append("<td style='width:80px;'><b>KPI Name</b></td>");
    b.Append("<td style='width:80px;'><b>Business</b></td>");
    b.Append("<td style='width:80px;'><b>Description</b></td>");

    b.Append("<td style='width:50px;'><b>Plan Live</b></td>");
    b.Append("<td style='width:80px;'><b>Actual Live</b></td>");
    b.Append("<td style='width:80px;'><b>Plan Q1</b></td>");
    b.Append("<td style='width:80px;'><b>Actual Q1</b></td></tr>");

    b.Append("<tr>");
    b.Append("<td>" + table.Rows[0]["Emp_Name"].ToString() + "</td>");
    b.Append("<td>" + table.Rows[0]["kpi_name"].ToString() + "</td>");
    b.Append("<td>" + table.Rows[0]["Bus_Name"].ToString() + "</td>");
    b.Append("<td>" + table.Rows[0]["Description"].ToString() + "</td>");
    b.Append("<td>" + table.Rows[0]["PLAN_LIVE"].ToString() + "</td>");
    b.Append("<td>" + table.Rows[0]["ACTUAL_LIVE"].ToString() + "</td>");
    b.Append("<td>" + table.Rows[0]["PLAN_Q1"].ToString() + "</td>");
    b.Append("<td>" + table.Rows[0]["ACTUAL_Q1"].ToString() + "</td>");


    b.Append("</tr>");

    b.Append("</table>");

    return b.ToString();
}

I know I need to loop through the dataset to populate all values in the dymanic table, but I dont know how to achieve this. Can someone help ?

Upvotes: 0

Views: 2698

Answers (2)

Ewerton
Ewerton

Reputation: 4523

Why dont use the hover menu of AjaxToolkit?

Upvotes: 0

Aghilas Yakoub
Aghilas Yakoub

Reputation: 28970

You can try with this code

b.Append("<table>");
//Here you add attributes of table
.... 
foreach(var row in table.Rows)
{

    b.Append("<tr>");
    b.Append("<td>");
    b.Append(row["Emp_Name"].ToString());
    b.Append("</td>"); 
    //here you add your differents cells
    .......
    b.Append("</tr>");
}
//Close your table
b.Append("</table>");

....

Upvotes: 1

Related Questions