Show Gridview Row details in ToolTip.

/* Here I will demonstrate how to show grid view row details in tool-tip. */

BlogPost

<%@ Page Title=”jQuery Show Gridview Row Details in Tooltip on MouseHover” Language=”C#”
MasterPageFile=”~/Site.master” AutoEventWireup=”true” CodeFile=”ToolTipRowDetails.aspx.cs”
Inherits=”ToolTipRowDetails” %>

<asp:Content ID=”Content1″ ContentPlaceHolderID=”HeadContent” runat=”Server”>
jQuery Show Gridview Row Details in Tooltip on MouseHover
// <!–[CDATA[–>
src=”http://code.jquery.com/jquery-1.8.2.js&#8221; type=”text/javascript”>
// ]]>
<script src=”Scripts/jquery.tooltip.min.js” type=”text/javascript”></script>
<script type=”text/javascript”>
function InitializeToolTip() {
$(“.gridViewToolTip”).tooltip({
track: true,
delay: 0,
showURL: false,
fade: 100,
bodyHandler: function () {
return $($(this).next().html());
},
showURL: false
});
}
</script>
<script type=”text/javascript”>
$(function () {
InitializeToolTip();
})
</script>
<style type=”text/css”>
#tooltip
{
position: absolute;
z-index: 3000;
border: 1px solid #111;
background-color: #FEE18D;
padding: 5px;
opacity: 0.85;
}
#tooltip h3, #tooltip div
{
margin: 0;
}
</style>
</asp:Content>
<asp:Content ID=”Content2″ ContentPlaceHolderID=”MainContent” runat=”Server”>
<asp:GridView ID=”grdDetails” AutoGenerateColumns=”false” CellPadding=”5″ runat=”server”>
<Columns>
<asp:TemplateField HeaderText=”UserId”>
<ItemStyle Width=”30px” HorizontalAlign=”Center” />
<ItemTemplate>
<a href=”#”>
<%# Eval(“Id”)%></a>
<div id=”tooltip” style=”display: none;”>
<table>
<tr>
nowrap;”>
Name:&nbsp;
</td>
<td>
<%# Eval(“Name”)%>
</td>
</tr>
<tr>
nowrap;”>
Age:&nbsp;
</td>
<td>
<%# Eval(“Age”)%>
</td>
</tr>
<tr>
nowrap;”>
City:&nbsp;
</td>
<td>
<%# Eval(“City”)%>
</td>
</tr>
</table>
</div>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField HeaderText=”Name” DataField=”Name” />
<asp:BoundField HeaderText=”Age” DataField=”Age” />
<asp:BoundField HeaderText=”City” DataField=”City” />
</Columns>
<HeaderStyle BackColor=”#df5015″ Font-Bold=”true” ForeColor=”White” />
</asp:GridView>
</asp:Content>

 

Code Behind:

using System;
using System.Web.UI;

public partial class ToolTipRowDetails : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
LoadData();
}
}

private void LoadData()
{
System.Data.DataTable dt = new System.Data.DataTable();
dt.Columns.Add(“Id”, typeof(Int32));
dt.Columns[“Id”].AutoIncrement = true;      // Auto increment Id
dt.Columns[“Id”].AutoIncrementSeed = 1;
dt.Columns[“Id”].AutoIncrementStep = 1;
dt.Columns.Add(“Name”, typeof(string));
dt.Columns.Add(“Age”, typeof(Int32));
dt.Columns.Add(“City”, typeof(string));

// Bind data to rows
System.Data.DataRow dtrow = dt.NewRow();    // Create New Row
dtrow[“Name”] = “Sunil Kumar”; //Bind Data to Columns
dtrow[“Age”] = “24”;
dtrow[“City”] = “Rajasthan”;
dt.Rows.Add(dtrow);

dtrow = dt.NewRow();    // Create New Row
dtrow[“Name”] = “Teena Singh”; //Bind Data to Columns
dtrow[“Age”] = “25”;
dtrow[“City”] = “Delhi”;
dt.Rows.Add(dtrow);

dtrow = dt.NewRow();    // Create New Row
dtrow[“Name”] = “Aksham Gupta”; //Bind Data to Columns
dtrow[“Age”] = “28”;
dtrow[“City”] = “MP”;
dt.Rows.Add(dtrow);

dtrow = dt.NewRow();    // Create New Row
dtrow[“Name”] = “Deepak Sharma”; //Bind Data to Columns
dtrow[“Age”] = “28”;
dtrow[“City”] = “Mumbai”;
dt.Rows.Add(dtrow);

grdDetails.DataSource = dt;
grdDetails.DataBind();
}
}

Advertisements

35 thoughts on “Show Gridview Row details in ToolTip.

  1. I really like your blog.. very nice colors & theme.

    Did you create this website yourself or did you hire someone to do it for you?
    Plz respond as I’m looking to create my own blog and would like to know where u got this from. thank you

    Like

    1. It is free. You just have to register on wordpress and you can start your blog. If you purchase it then you can change its domain, now you can see that there is “wordpress” in domain name.

      Like

  2. Have you ever considered about adding a little bit more
    than just your articles? I mean, what you say is important and everything.
    But think of if you added some great graphics or video clips to give your posts more, “pop”!
    Your content is excellent but with images and videos, this
    website could certainly be one of the greatest in its field.
    Very good blog!

    Like

    1. Thanks for you suggestions, but I am using free blog of wordpress, I don’t have much space and functionality, even then I’ll try to add some more media to make post more understandable.

      Like

  3. I’d like to thank you for the efforts you have put in writing this site. I’m hoping to see
    the same high-grade blog posts by you in the future as well.
    In fact, your creative writing abilities has encouraged me to get my own website now 😉

    Like

  4. I think everything posted was very reasonable. But, think on this, suppose you
    typed a catchier title? I am not saying your content is not good.
    , however suppose you added a title that grabbed a person’s attention? I mean Show Gridview Row details in ToolTip. | Code World Technology is a little plain. You should peek at Yahoo’s home page and watch how they write
    article titles to grab viewers interested. You might try adding a video or a picture or
    two to get readers excited about everything’ve got to say. In my opinion, it might bring your posts a little livelier.

    Like

  5. I seldom comment, however i did a few searching and wound up here Show Gridview Row details in ToolTip.
    | Code World Technology. And I actually do have a couple
    of questions for you if you usually do not mind. Is it
    simply me or does it look like a few of these comments appear like
    coming from brain dead visitors? 😛 And, if you are posting on other online social sites, I would like to follow anything fresh you
    have to post. Could you make a list of the complete urls of your shared pages like your Facebook page, twitter feed, or linkedin profile?

    Like

  6. I leave a comment whenever I especially enjoy a article on a site or I have
    something to add to the discussion. Usually it’s triggered by the sincerness communicated in the post I browsed. And on this article Show Gridview Row details in ToolTip. | Code World Technology. I was actually excited enough to post a thought 😉 I do have 2 questions for you if it’s allright.

    Could it be simply me or does it look like like a few of the comments
    appear like they are coming from brain dead visitors? 😛
    And, if you are writing at additional places, I would like to keep up with anything fresh you
    have to post. Could you list every one of your social pages like your twitter feed, Facebook page or linkedin profile?

    Like

  7. Having read this I thought it was really enlightening.
    I appreciate you spending some time and effort to put this information together.

    I once again find myself spending a lot of time both reading and leaving comments.
    But so what, it was still worth it!

    Like

  8. This is very attention-grabbing, You are a very skilled
    blogger. I’ve joined your rss feed and sit up for seeking extra of your great post. Also, I’ve shared your website in my
    social networks

    Like

  9. My brother suggested I might like this blog.
    He was entirely right. This post truly made my day.
    You can not imagine simply how much time I had spent for this information!
    Thanks!

    Like

  10. I think this is one of the most important info for me.
    And i’m glad reading your article. But want to remark on some general things, The web site style is perfect, the articles is really nice : D. Good job, cheers

    Like

  11. I don’t even know how I ended up here, but I thought this post was good. I do not know who you are but certainly you are going to a famous blogger if you aren’t
    already 😉 Cheers!

    Like

  12. Howdy! This post couldn’t be written any better! Reading through this post reminds
    me of my good old room mate! He always kept talking about this.
    I will forward this page to him. Pretty sure he will have a
    good read. Thanks for sharing!

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s