Click here to Skip to main content
Click here to Skip to main content

A Simple DataGrid Row Tooltip For Beginners.

, 14 Sep 2006 CPOL
Rate this:
Please Sign up or sign in to vote.
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.

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

<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#]

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)

Share

About the Author

Prakash Kalakoti
Technical Lead
India India
Its me Smile | :)

Comments and Discussions

 
GeneralMy vote of 5 Pinmembermanoj kumar choubey16-Feb-12 20:02 
SuggestionTooltip widget that can be applied to DataGrid, Repeater or GridView PinmemberJohn Wcb6-Feb-12 12:25 
Generalin c# Pinmembermrprata21-Jul-09 21:31 
GeneralIt doen's work in Mozilla Pinmemberdipudo29-Apr-08 23:35 
QuestionRe: It doen's work in Mozilla PinmemberRajarya_22223-Jun-11 9:09 
Questionhow to Load images Pinmemberajay_manral@rediffmail.com19-Oct-07 22:39 
GeneralThanks Pinmembernaveensky27-Sep-07 6:24 
QuestionLoad Image Pinmemberwrivera8-Jun-07 13:09 
Generalcode request please Pinmemberdagma2016-May-07 7:21 
GeneralAn Easier way PinmemberGibstov8-Feb-07 10:47 
GeneralRe: An Easier way Pinmemberchachansin@hotmail.com29-Jun-10 5:10 
Questiontable style PinmemberMaxAtChamber18-Jan-07 17:48 
Questioni need your help Pinmemberanil 1kumar28-Nov-06 23:24 
QuestionI need your Help PinmemberCCs_Vzla_Asp29-Sep-06 4:03 
GeneralSource code Pinmemberleosong17-Sep-06 7:54 
GeneralRe: Source code PinmemberPrakash Kalakoti17-Sep-06 19:19 
GeneralI would like to have the source code as well PinmemberSue_NC13-Sep-06 6:31 
GeneralSource Code PinmemberStephen Noronha1-Sep-06 8:13 
Generalsource code please.. Pinmembernmarun25-Aug-06 9:17 
GeneralSource Code Pinmemberluke687-Aug-06 9:13 
QuestionStyle Sheet? Pinmembermikemachos26-Jul-06 10:22 
GeneralReally simple and excellent PinmemberBala-vikash25-Jul-06 22:08 
GeneralRe: Really simple and excellent PinmemberPrakash Kalakoti26-Jul-06 18:50 
GeneralSorce Code PinmemberPrakash Kalakoti24-Jul-06 4:35 
GeneralRe: Sorce Code Pinmembercs23126-Jul-06 18:11 
Prakash,
 
Could you please send me the source code. I am having problem with the DIV. so hope it will be solved if I can look at the source code.
 
Thank you,
Chandu

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

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

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.141223.1 | Last Updated 14 Sep 2006
Article Copyright 2004 by Prakash Kalakoti
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid