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

By: Suresh Dasari 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.

Description:

In previous articles I explained jQuery show large image preview on hover in asp.net, jQuery display text over image using content hover plugin, jQuery detect browser type and version in asp.net, jQuery change the style of tooltip in asp.net, asp.net export gridview data with images to word / excel using c#.net / vb.net, asp.net scrollable repeater with fixed header, use of using statement in c# and many articles relating to asp.net, css, c#, vb.net and jQuery. Now I will explain how to bind and show images on mouseover in asp.net gridview using c#, vb.net with example.

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

<title>jQuery Show Image on Hover in Gridview</title>

$(function(){

$(".gridImages").tooltip({

track: true,

delay: 0,

showURL: false,

fade: 100,

bodyHandler: function () {

return $($(this).next().html());

},

showURL: false

});

})

</script>

.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>

<asp:GridView ID="gvDetails" CssClass="Gridview" runat="server" AutoGenerateColumns="False">

<asp:BoundField HeaderText="User Id" DataField="UserId" />

<asp:BoundField HeaderText="User Name" DataField="UserName" />

<asp:BoundField HeaderText="Education" DataField="Education" />

<asp:TemplateField HeaderText="Image">

<%--Image in Gridview--%>

<asp:Image ID="Image1" Width="25px" Height="25px" runat="server" class="gridImages" ImageUrl='<%#Eval("Imagepath") %>' />

<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 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; November 30, 2016 at 3:30 PM

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

Subscribe to: Post Comments ( Atom )

ASP.NET,C#.NET,VB.NET,JQuery,JavaScript,Gridview