This morning I was trying to integrate jQuery tooltip plugin with grid view. What I need is on hovering of the one cell, I want to pass some parameters and read the content of the tooltip from a web method. I could not find any straightforward solution of the problem. So, I thought of sharing my take on it.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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">
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.js" type="text/javascript"></script>
<script src="http://jquery.bassistance.de/tooltip/jquery.tooltip.js" type="text/javascript"></script>
<link href="http://jquery.bassistance.de/tooltip/jquery.tooltip.css" rel="stylesheet"
type="text/css" />
<script type="text/javascript">
$(document).ready(function() {
$("table[id*=GridView1] span[id*=LastDeliveryDate]").tooltip({
delay: 0,
offset: [-65, -110],
position: 'center top',
bodyHandler: function() {
var VendorID = $(this).closest("tr").find("span[id*=VendorNo]").text();
var ItemID = $(this).closest("tr").find("input[type=hidden][id*=itemID]").val();
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "Default.aspx/getLastRequest",
data: "{'VendorID': '" + VendorID + "','ItemID': '" + ItemID + "'}",
dataType: "json",
success: function(msg) {
$("#loadingimage").parent().html(msg.d);
}
});
return $("<img id='loadingimage' src='http://www.heathrowtosouthampton.co.uk/Web/images/gif/Processing1.gif' />");
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:TemplateField HeaderText="Vendor No">
<ItemTemplate>
<asp:Label ID="VendorNo" runat="server" Text='<%# Bind("VendorID") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Item Name">
<ItemTemplate>
<asp:Label ID="Label1" runat="server" Text='<%# Bind("ItemName") %>'></asp:Label>
<asp:HiddenField ID="itemID" runat="server" Value='<%#Eval("ItemID") %>' />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Last Delivery Date">
<ItemTemplate>
<asp:Label ID="LastDeliveryDate" runat="server" Text='<%# Bind("DeliveryDate","{0:dd MMMM yyyy}") %>'
CssClass="anchor1"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</form>
</body>
</html>
using System;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
var dataSource = (new[] { new { VendorID = 1, ItemName = "ItemName 0", ItemID = 1, DeliveryDate = DateTime.Now } }).ToList();
dataSource.Add(new { VendorID = 2, ItemName = "ItemName 1", ItemID = 2, DeliveryDate = DateTime.Now.AddDays(-10) });
dataSource.Add(new { VendorID = 3, ItemName = "ItemName 2", ItemID = 3, DeliveryDate = DateTime.Now.AddDays(-20) });
dataSource.Add(new { VendorID = 4, ItemName = "ItemName 3", ItemID = 4, DeliveryDate = DateTime.Now.AddDays(-30) });
dataSource.Add(new { VendorID = 5, ItemName = "ItemName 4", ItemID = 5, DeliveryDate = DateTime.Now.AddDays(-40) });
dataSource.Add(new { VendorID = 6, ItemName = "ItemName 5", ItemID = 6, DeliveryDate = DateTime.Now.AddDays(-50) });
dataSource.Add(new { VendorID = 7, ItemName = "ItemName 6", ItemID = 7, DeliveryDate = DateTime.Now.AddDays(-60) });
GridView1.DataSource = dataSource;
GridView1.DataBind();
}
[System.Web.Services.WebMethod]
public static string getLastRequest(string VendorID, string ItemID)
{
System.Threading.Thread.Sleep(3000);//used just to simulate ajax delay
return "<div style='width:300px; height:100px;background-color:gray;color:white'> Result for VendorID=" + VendorID + " and ItemID=" + ItemID + "</div>";
}
}
body
{
color: #2E3139;
font: 11px Verdana;
}
table
{
border-style: solid none none solid ;
border-left-width:1px ;
border-top-width:1px ;
background-color:White;
z-index:2000000;
}
table th
{
text-align: left;
padding: 3px 5px 3px 5px;
background-color: #e0e8fd;
border-style: none solid solid none;
border-width: 0 1px 1px 0;
}
table td
{
text-align: left;
padding: 3px 5px 3px 5px;
border-style: none solid solid none;
border-width: 0 1px 1px 0;
}
table tr
{
background-color:white;
}
table tr:hover
{
background-color:#C8BEF3;
}
No comments :
Post a Comment