In this article I am going to show a simple tooltip in GridView using jQuery.
IntroductionThis is the continuation of my previous articles
Create a table like this
next step create a webpage cricket.aspx and add a gridview like this
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:TemplateField HeaderText="Player Name">
<ItemTemplate>
<a href="#" class='anchor1' id='<%#Eval("pid")%>'><%#Eval("name")%></a>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Age">
<ItemTemplate>
<span id= 'first<%# Eval("age") %>' class='text'><%# Eval("age")%> </span>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Test">
<ItemTemplate>
<span id= 'first<%# Eval("tests") %>' class='text'><%# Eval("tests")%> </span>
</ItemTemplate>
</asp:TemplateField >
<asp:TemplateField HeaderText="ODI">
<ItemTemplate>
<span id= 'first<%# Eval("odi") %>' class='text'><%# Eval("odi")%> </span>
</ItemTemplate>
</asp:TemplateField >
<asp:TemplateField HeaderText="Test Runs">
<ItemTemplate>
<span id= 'first<%# Eval("testruns") %>' class='text'><%# Eval("testruns")%> </span>
</ItemTemplate>
</asp:TemplateField >
</Columns>
</asp:GridView>
<div id="disp" style="position:absolute; background-color: #FFF; z-index: 20000; ">
on the .cs page of cricket.aspx write this code
SqlConnection conn = new SqlConnection("Data Source=BAIJU;Initial Catalog=baiju;Integrated Security=True");
protected void Page_Load(object sender, EventArgs e)
{
SqlDataAdapter da = new SqlDataAdapter("select * from cricket",conn);
DataSet ds = new DataSet();
da.Fill(ds);
GridView1.DataSource = ds;
GridView1.DataBind();
}
run the application we get like this page
go to design view of cricket.aspx
write this jquery code
<script src="jquery-1.2.6.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$('.anchor1').mouseover(function() {
$("#disp").show();
var pos = $(this).offset();
var width = $(this).width();
$("#disp").css({
left: (pos.left + width) + 'px',
top: pos.top - 5 + 'px'
});
var id1 = $(this).attr("id");
var ID = 'CustomerID=' + id1;
$.ajax({
type: "GET",
url: "CricketProcess.aspx",
data: ID,
success: function(data) {
$("#disp").show("slow");
$("#disp").html(data);
}
});
return false;
});
$('.anchor1').mouseout(function() {
$("#disp").hide();
});
});
</script>
afsa
Add new web page named it as CricketProcess.aspx
create a folder PlayerImages and add images
on the .cs pagec of CricketProcess.aspx
write this code
SqlConnection conn = new SqlConnection("Data Source=BAIJU;Initial Catalog=baiju;Integrated Security=True");
protected void Page_Load(object sender, EventArgs e)
{
string CustomerID = Request.QueryString["CustomerID"];
SqlCommand cmd1 = new SqlCommand("select * from cricket where pid='" + CustomerID + "'", conn);
conn.Open();
SqlDataReader dr = cmd1.ExecuteReader();
Response.Write(" <fieldset style=' width:250px;height:200px;border-color=gray; '>");
Response.Write("<table border= '0' width='250px' >");
Response.Write("<tbody>");
while (dr.Read())
{
Response.Write("<tr><td VALIGN='top'> <img width='100px' src='./PlayerImages/" + dr["PictureUrl"].ToString() + " '></td>");
Response.Write("<td VALIGN='top'><table><tr><td > ID : " + dr["pid"].ToString() + "</td></tr> ");
Response.Write("<tr><td > Name : " + dr["Name"].ToString() + "</td></tr> ");
//Response.Write("<td> <img width='100px' src='./ProductImages/" + dr["PictureURL"].ToString() + " '</td>");
Response.Write("<tr><td>Age: " + dr["age"].ToString() + "</td> </tr>");
Response.Write("<tr><td>Tests: " + dr["tests"].ToString() + "</td> </tr>");
Response.Write("<tr><td>TestRuns: " + dr["testruns"].ToString() + "</td> </tr>");
Response.Write("<tr><td>TestCentury: " + dr["tcenturt"].ToString() + "</td> </tr>");
Response.Write("<tr><td>ODI: " + dr["odi"].ToString() + "</td> </tr>");
Response.Write("<tr><td>ODIRuns: " + dr["odiruns"].ToString() + "</td> </tr>");
Response.Write("</table>");
Response.Write("</td>");
Response.Write("</tr>");
}
conn.Close();
Response.Write("</tbody>");
Response.Write("</table>");
Response.Write("</fieldset>");
}
run the application we get
I hope everyone like the application
Regards
K L BAIJU