Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

jQuery Show Asp.Net Gridview Images On Mouseover (Large) in C#, VB.NET

Jul 5, 2016
Introduction

Here I will explain how to bind images in
asp.net gridview and show image on mouse hover in c#, vb.net with example or asp.net gridview show images on hover as a tooltip using jQuery tooltip plugin in c#, vb.net with example or asp.net repeater paging with numbers and sort columns with example in c#, vb.net. By using jQuery tooltip plugin we can show images on mouse over in asp.net gridview control easily.


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


If you enjoyed this post, please support the blog below. It's FREE!

Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email

1 comments :

Anonymous said...

I am not getting error in console but my hover or tooltip event is not triggering/firing

I have added the js files and jquery file to your solution

Give your Valuable Comments

Other Related Posts

© 2015 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.