tri_inn
Level: Regular User
Registered: 26-08-2002
Posts: 395
|
how to develop a tool tips for datagrid?
i have got a code which show content of datagrid row when someone will over his mouse on any cell of
datagrid by javascript but the code is working 70% in IE. according to me tooltips sould show
in the position where user will place his mouse pointer but it showing tool tips in the top
of the browser and also the javascript is not working in netscape.so please rectify my
code as a result tooltips will show where user will place his mouse pointer and this script
should work in IE & Netscape.i am giving my code with html and serverside code
my html code follows
----------------------
<%@ Page Language="vb" AutoEventWireup="false" Codebehind="Alphabet_paging.aspx.vb" Inherits="TestApp.Alphabet_paging" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<title>WebForm1</title>
<meta name="GENERATOR" content="Microsoft Visual Studio.NET 7.0">
<meta name="CODE_LANGUAGE" content="Visual Basic 7.0">
<meta name="vs_defaultClientScript" content="JavaScript">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
<script language="javascript">
function ShowTooltip(lastname,firstname)
{
document.getElementById("td0").innerText=lastname;
document.getElementById("td1").innerText=firstname;
x = event.clientX + document.body.scrollLeft;
y = event.clientY + document.body.scrollTop + 10;
Popup.style.display="block";
Popup.style.left = x;
Popup.style.top = y;
}
function HideTooltip()
{
Popup.style.display="none";
}
</script>
</HEAD>
<body MS_POSITIONING="GridLayout">
<form id="Form1" method="post" runat="server">
<div id="Popup">
<div style="BACKGROUND-COLOR: #003366"><b><center>
<span>Address</span></center>
</b>
</div>
<div>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td id="td0" align="left" ></td>
</tr>
<tr>
<td id="td1" align="left" ></td>
</tr>
</table>
</div>
</div>
<asp ataGrid id="DataGrid1" style="Z-INDEX: 101; LEFT: 193px; POSITION: absolute; TOP: 106px" runat="server" BorderColor="#CC9966" BorderStyle="None" BorderWidth="1px" BackColor="White" CellPadding="4" ShowFooter="True">
<SelectedItemStyle Font-Bold="True" ForeColor="#663399" BackColor="#FFCC66"></SelectedItemStyle>
<ItemStyle ForeColor="#330099" BackColor="White"></ItemStyle>
<HeaderStyle Font-Bold="True" ForeColor="#FFFFCC" BackColor="#990000"></HeaderStyle>
<FooterStyle ForeColor="#330099" BackColor="#FFFFCC"></FooterStyle>
<PagerStyle HorizontalAlign="Center" ForeColor="#330099" BackColor="#FFFFCC"></PagerStyle>
</aspataGrid>
</form>
</body>
</HTML>
my serverside code follows
----------------------------
Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
If Not Page.IsPostBack Then
BindGrid()
End If
End Sub
Sub BindGrid(Optional ByVal alpha As String = "%")
Dim connstr As String = "database=andreavb.ipowermysql.com;User ID=sa;pwd=sa;Initial Catalog=Northwind"
Dim cnn As New SqlConnection(connstr)
Dim da As SqlDataAdapter
If alpha = "%" Then
da = New SqlDataAdapter("select lastname,firstname from employees", cnn)
Else
da = New SqlDataAdapter("select lastname,firstname from employees where lastname like '" & LCase(alpha) & "%'", cnn)
End If
Dim ds As New DataSet()
da.Fill(ds, "employees")
DataGrid1.DataSource = ds
DataGrid1.DataBind()
End Sub
Private Sub DataGrid1_ItemDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.DataGridItemEventArgs) Handles DataGrid1.ItemDataBound
If e.Item.ItemType = ListItemType.AlternatingItem Or e.Item.ItemType = ListItemType.Item Then
If Not IsNothing(e.Item.DataItem) Then
e.Item.Attributes.Add("onmouseover", "ShowTooltip('" & _
DataBinder.Eval(e.Item.DataItem, "lastname").ToString() & "','" & _
DataBinder.Eval(e.Item.DataItem, "firstname").ToString() & "','" & _
"');")
e.Item.Attributes.Add("onmouseout", "HideTooltip();")
End If
End If
End Sub
|
