Click here to Skip to main content
15,868,340 members
Articles / Web Development / HTML
Article

A Simple DataGrid Row Tooltip For Beginners.

Rate me:
Please Sign up or sign in to vote.
4.73/5 (45 votes)
14 Sep 2006CPOL3 min read 349.7K   2.6K   113   76
A simple DataGrid Row Tooltip for beginners.

Sample Image - tooltip.gif

Introduction

There are lot of examples and articles on tooltip but I didn't find any which displays the content from a database table dynamically. I have gone through different articles and at last used the following approach which I want to share with you all.

This article describes how to create a dynamic tooltip in ASP.NET using JavaScript. Here, we can design our tooltip as we want its look, it's not like conventional Windows tooltip. If we want, we can insert images also to our tooltip. The appearance of the tooptip can be changed according to requirement. This article contains very simple code of JavaScript and ASP.NET.

Implementation

I'll try to explain this article using an example. Let us take a database table having the following fields:

  • Client_Id
  • Client_Name
  • Address
  • City
  • State
  • Phone
  • Fax
  • Status

Here, we are binding this table to a DataGrid and we are displaying only few fields (Client_id, Client_Name and the Status of the client). Now, our requirement is when the user places his mouse over a particular row of the DataGrid, we need to display the Client_name, Address, city, state, Phone and Fax of the client using a tooltip.

First, we'll design our tooltip. It'll be better if we'll use a DIV tag so that we can move this tag anywhere in our document, and whenever required, we can hide it on mouseout event. Within the DIV tag here, I am using a table, and each cell of the table is dynamically filled at mouseover event using JavaScript.

HTML
<div id="Popup" class="transparent">
  <div style="background-color: #003366"><b><center>
                 <span>Address</span></center></b></div>
   <div>
   <table width=100% border=0 cellpadding=0 cellspacing=0>
    <tr>
     <td id=td0 align=left class=runtext1></td>
    </tr>
    <tr>
     <td id=td1 align=left class=runtext></td>
    </tr>
    <tr>
     <td id=td2 align=left class=runtext></td>
    </tr>
    <tr>
     <td id=td3 align=left class=runtext></td>
    </tr>
    <tr>
     <td id=td4 align=left class=runtext></td>
    </tr>
    <tr>
     <td id=td5 align=left class=runtext></td>
    </tr>
   </table>
   
   </div>
 </div>

Here for each cell of the table, the text we'll fill dynamically using innerText property of the table cell. This we'll see in our JavaScript function.

Next step is to write the JavaScript function which will fill the table cells dynamically.

JavaScript
<script language=javascript>
function ShowTooltip(name,address,city,state,phone1,fax)
{
    document.getElementById("td0").innerText=name; 
    document.getElementById("td1").innerText=address;
    document.getElementById("td2").innerText=city;
    document.getElementById("td3").innerText=state;
    document.getElementById("td4").innerText=phone1;
    document.getElementById("td5").innerText=fax;
    x = event.clientX + document.body.scrollLeft;
    y = event.clientY + document.body.scrollTop + 10;
    Popup.style.display="block";
    Popup.style.le ft = x;
    Popup.style.top = y;
 }

function HideTooltip()
{
    Popup.style.display="none";
}
</script>

Here in ShowTooltip function, we are getting 6 arguments and setting these values to the cells of the table. After this, we are getting the current mouse position x-y coordinates and displaying the tooltip at desired location. I think hide function is understood; it is fired at mouseout event of the DataGrid row.

Now, our final and most important task is to pass the values from the database table to the JavaScript function at the time of DataGrid binding, and add the mouseover and mouseout events to each DataGrid row. For this, we'll use the DataGrid's ItemDataBound event, which occurs after an item is data bound to the DataGrid control. This event provides us with the last opportunity to access the data item before it is displayed on the client. After this event is raised, the data item is nulled out and no longer available.

C#
//[C#]

void dgClient_ItemDataBound(object sender, 
             DataGridItemEventArgs e)
{
  if (e.Item.DataItem != null)
  {
    e.Item.Attributes.Add("onmouseover", "ShowTooltip('" + 
      DataBinder.Eval(e.Item.DataItem, "client_name").ToString() + "','" + 
      DataBinder.Eval(e.Item.DataItem, "Address").ToString() + "','" + 
      DataBinder.Eval(e.Item.DataItem, "CITY").ToString() + "','" + 
      DataBinder.Eval(e.Item.DataItem, "STATE").ToString() + "', '" + 
      DataBinder.Eval(e.Item.DataItem, "PHONE1").ToString() + "','" + 
      DataBinder.Eval(e.Item.DataItem, "FAX").ToString() + 
      "');"); 
   e.Item.Attributes.Add("onmouseout","HideTooltip();");
  }
}

Conclusion:

I am also new to ASP.NET, there may be some better way to do this also. If you are having any suggestion or comments, please do tell me, it will really help me to improve myself. I hope the rest of the code is not required for this simple example, and I don't want to waste the precious CP space. If the complete code is required, just tell me, I'll send the code.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Architect
India India
Its me Smile | :)

Comments and Discussions

 
GeneralRe: Sorce Code Pin
cs23126-Jul-06 17:12
cs23126-Jul-06 17:12 
GeneralRe: Sorce Code Pin
PSK_26-Jul-06 17:47
PSK_26-Jul-06 17:47 
GeneralRe: Sorce Code Pin
asifrazach4-Aug-06 7:57
asifrazach4-Aug-06 7:57 
QuestionRe: Sorce Code Pin
A.M.Sivakumaran15-Aug-06 23:51
A.M.Sivakumaran15-Aug-06 23:51 
GeneralRe: Sorce Code Pin
David Leyva23-Aug-06 7:05
David Leyva23-Aug-06 7:05 
GeneralRe: Sorce Code Pin
slayer3516-Dec-06 13:51
slayer3516-Dec-06 13:51 
Generalsource code.. Pin
sirilak.pompan24-Jul-06 0:12
sirilak.pompan24-Jul-06 0:12 
GeneraldgClient_ItemDataBound Pin
Shayeb16-Jul-06 1:26
Shayeb16-Jul-06 1:26 
GeneralHello Pin
redamekaoui7-Jul-06 4:04
redamekaoui7-Jul-06 4:04 
GeneralArticle is Really Good Pin
satheeshcse20052-Jul-06 19:54
satheeshcse20052-Jul-06 19:54 
Generalsource code Pin
rumon70722-Apr-06 19:18
rumon70722-Apr-06 19:18 
QuestionImages? Pin
eggsovereasy14-Mar-06 5:23
eggsovereasy14-Mar-06 5:23 
AnswerRe: Images? Pin
tickko0614-Sep-06 9:48
tickko0614-Sep-06 9:48 
AnswerRe: Images? Pin
PSK_17-Sep-06 18:45
PSK_17-Sep-06 18:45 
GeneralDiv Tag / CSS Pin
RAyRAy=)27-Feb-06 15:54
RAyRAy=)27-Feb-06 15:54 
Generalpopup not popping up where mouse is Pin
Shaun Longhurst13-Feb-06 22:38
Shaun Longhurst13-Feb-06 22:38 
GeneralRe: popup not popping up where mouse is Pin
Shaun Longhurst14-Feb-06 3:38
Shaun Longhurst14-Feb-06 3:38 
GeneralRe: popup not popping up where mouse is Pin
Sriramv8217-Feb-06 0:20
Sriramv8217-Feb-06 0:20 
GeneralRe: popup not popping up where mouse is Pin
eggsovereasy14-Mar-06 5:21
eggsovereasy14-Mar-06 5:21 
GeneralRe: popup not popping up where mouse is Pin
Shaun Longhurst24-Mar-06 8:08
Shaun Longhurst24-Mar-06 8:08 
GeneralRe: popup not popping up where mouse is Pin
Drew Hysong26-May-06 3:56
Drew Hysong26-May-06 3:56 
Generalurgent need of source code Pin
Sriramv827-Feb-06 17:34
Sriramv827-Feb-06 17:34 
GeneralRe: urgent need of source code Pin
aaava14-Aug-06 11:57
aaava14-Aug-06 11:57 
Generalhi Pin
Sriramv827-Feb-06 6:23
Sriramv827-Feb-06 6:23 
Questioncan we create a movable tool tip Pin
gojessi21-Dec-05 4:38
gojessi21-Dec-05 4:38 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.