To implement showing gridview images on mouse over in asp.net using c#, vb.net first write the code following code in your aspx page
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1">
<title>jQuery Show Image on Hover in Gridview</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="js/jquery.tooltip.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$(".gridImages").tooltip({
track: true,
delay: 0,
showURL: false,
fade: 100,
bodyHandler: function () {
return $($(this).next().html());
},
showURL: false
});
})
</script>
<style type="text/css">
.GridviewDiv {font-size: 100%; font-family: 'Lucida Grande', 'Lucida Sans Unicode', Verdana, Arial,Helevetica, sans-serif; color: #303933;}
.headerstyle
{
color:#FFFFFF;border-right-color:#abb079;border-bottom-color:#abb079;background-color:#df5015;padding:0.5em 0.5em 0.5em 0.5em;text-align:center;
}
#tooltip {
position: absolute;
z-index: 3000;
border: 1px solid #111;
background-color: #FEFFFF;
padding: 5px;
opacity: 1.55;
}
#tooltip h3, #tooltip div { margin: 0; }
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="GridviewDiv">
<asp:GridView ID="gvDetails" CssClass="Gridview" runat="server" AutoGenerateColumns="False">
<HeaderStyle CssClass="headerstyle" />
<Columns>
<asp:BoundField HeaderText="User Id" DataField="UserId" />
<asp:BoundField HeaderText="User Name" DataField="UserName" />
<asp:BoundField HeaderText="Education" DataField="Education" />
<asp:TemplateField HeaderText="Image">
<ItemStyle Width="90px" HorizontalAlign="Center" />
<ItemTemplate>
<%--Image in Gridview--%>
<asp:Image ID="Image1" Width="25px" Height="25px" runat="server" class="gridImages"ImageUrl='<%#Eval("Imagepath") %>' />
<div id="tooltip" style="display: none;">
<table>
<tr>
<%--Image to Show on Hover--%>
<td><asp:Image ID="imgUserName" Width="150px" Height="120px"ImageUrl='<%#Eval("Imagepath") %>' runat="server" /></td>
</tr>
</table>
</div>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</form>
</body>
</html>
|
If you observe above code we added script “jquery.tooltip.js” by using this we can show images in tooltip on mouseover gridview images you can get this file from attached sample code. Now open code behind file and write following code
C# Code
using System;
using System.Data;
public partial class ShowImageonHoverinGridview : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
gvDetails.DataSource = BindGridviewData();
gvDetails.DataBind();
}
}
/// <summary>
/// Dynamically create & bind data to gridview
/// </summary>
protected DataTable BindGridviewData()
{
DataTable dt = new DataTable();
dt.Columns.Add("UserId", typeof(Int32));
dt.Columns.Add("UserName", typeof(string));
dt.Columns.Add("Education", typeof(string));
dt.Columns.Add("Imagepath", typeof(string));
dt.Rows.Add(1, "Suresh Dasari", "B.Tech", "bujji.jpg");
dt.Rows.Add(2, "Rohini Dasari", "Msc", "Data.png");
dt.Rows.Add(3, "Madhav Sai", "MS", "~/uploads/1.jpg");
dt.Rows.Add(4, "Praveen", "B.Tech", "~/uploads/2.jpg");
dt.Rows.Add(6, "Sateesh", "MD", "~/uploads/3.jpg");
dt.Rows.Add(7, "Mahesh Dasari", "B.Tech", "~/uploads/4.jpg");
dt.Rows.Add(8, "Mahendra", "CA", "~/uploads/5.jpg");
return dt;
}
}
|
VB.NET Code
Imports System.Collections
Imports System.Data
Imports System.Web.UI.WebControls
Partial Class VBCode
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
If Not IsPostBack Then
gvDetails.DataSource = BindGridviewData()
gvDetails.DataBind()
End If
End Sub
''' <summary>
''' Dynamically create & bind data to gridview
''' </summary>
Protected Function BindGridviewData() As DataTable
Dim dt As New DataTable()
dt.Columns.Add("UserId", GetType(Int32))
dt.Columns.Add("UserName", GetType(String))
dt.Columns.Add("Education", GetType(String))
dt.Columns.Add("Imagepath", GetType(String))
dt.Rows.Add(1, "Suresh Dasari", "B.Tech", "bujji.jpg")
dt.Rows.Add(2, "Rohini Dasari", "Msc", "Data.png")
dt.Rows.Add(3, "Madhav Sai", "MS", "~/uploads/1.jpg")
dt.Rows.Add(4, "Praveen", "B.Tech", "~/uploads/2.jpg")
dt.Rows.Add(6, "Sateesh", "MD", "~/uploads/3.jpg")
dt.Rows.Add(7, "Mahesh Dasari", "B.Tech", "~/uploads/4.jpg")
dt.Rows.Add(8, "Mahendra", "CA", "~/uploads/5.jpg")
Return dt
End Function
End Class
|
Demo
Download Sample Code Attached
.png)
0 comments:
Post a Comment
Note: only a member of this blog may post a comment.