Feel Tech Evolution: How To Add Tooltip in GridView

Wednesday, 22 February 2012

How To Add Tooltip in GridView


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="tooltip.aspx.cs"
Inherits="tooltip" %>

<!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 id="Head1" runat="server">
  <title>Untitled Page</title>

  <script language="JavaScript">
<!--

var bname;
var bversion;
var brows;

function reg()
{
bname=navigator.appName;
bversion=parseInt(navigator.appVersion)
if (bname=="Netscape")
brows=true
else
brows=false
}


// Do not edit anything else in the script !!!!

function don(row,path){
if ((bname=="Netscape" && bversion>=4) ||

 (bname=="Microsoft Internet Explorer" && bversion>=4)){
if (brows){

document.layers['linkex'].document.writeln('<img src='+path+' />');
document.layers['linkex'].document.close();
 var rec = getoffset(row);
document.layers['linkex'].top=rec.Top+row.offsetTop;
document.layers['linkex'].left=rec.Left;

document.layers['linkex'].visibility="show";
}
else

 {
//debugger;
linkex.innerHTML='<img src='+path+' />';
var rec = getoffset(row);
linkex.style.top=rec.Top+row.offsetHeight;
linkex.style.left=rec.Left;
//linkex.style.background=bgcolor;

linkex.style.visibility="visible";
}
}
}

function doff(){
if ((bname=="Netscape" && bversion>=4) ||

 (bname=="Microsoft Internet Explorer" && bversion>=4)){
if (brows)
document.layers['linkex'].visibility="hide";
else
linkex.style.visibility="hidden";
}
}

function   getoffset(e)
{  
var   t=e.offsetTop;  
var   l=e.offsetLeft;  
while(e=e.offsetParent)
{  
t+=e.offsetTop;  
l+=e.offsetLeft;  
}  
var   rec   = new Object();

rec.Top   =   t;
rec.Left  =   l;

return   rec
}

//-->


  </script>

</head>
<body onload='reg();'>
  <form id="form1" runat="server">
      <div id="linkex" style="position: absolute; visibility: hidden; width: 80%">
      </div>
      <layer name="linkex" visibility="hide" width="80%:">
     </layer>
      <div>
          <asp:GridView ID="GridView1" runat="server"

                          OnRowDataBound="GridView1_RowDataBound">
          </asp:GridView>
      </div>
  </form>
</body>
</html>


using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class tooltip : System.Web.UI.Page
{
   protected void Page_Load(object sender, EventArgs e)
   {
       if (!IsPostBack)
           bind();
   }

   private void bind()
   {
       DataTable table = new DataTable();
       table.Columns.Add("booktitle");
       table.Columns.Add("tooltip");


       DataRow dr = table.NewRow();
       dr["booktitle"] = "aaaaa";
       dr["tooltip"] = "cart_icon.jpg";
       table.Rows.Add(dr);
       DataRow dr1 = table.NewRow();
       dr1["booktitle"] = "ddd";
       dr1["tooltip"] = "cart_icon2.jpg";
       table.Rows.Add(dr1);
       this.GridView1.DataSource = table;
       GridView1.DataBind();
   }

   protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
   {
       if (e.Row.RowType == DataControlRowType.DataRow)
       {
           DataRowView drv = ((DataRowView)e.Row.DataItem);
           string path = drv["tooltip"].ToString();
           e.Row.Attributes.Add("onmouseover", "don(this,'" + path + "')");
           e.Row.Attributes.Add("onmouseout", "doff()");
       }
   }
}

Wednesday, 22 February 2012

How To Add Tooltip in GridView

No comments :