DataGrid - How to display the content of a hidden TemplateField on mouseover

Question

Hi,

i'm using a DataGrid to display informations (e.g. names and addresses of bookstores), and i want to display the opening hours in a tooltip onmouseover. The information i want to show onmouseover is in a TemplateField which Visible porperty is set to false.

How can i achieve that? Must i use javascript and css ?

Thanx

Answer 1

Yes, you won't be able to do it serverside, so it's javascript and css.

The easiest way to do it is probably to set the Visible attribute to true again (I don't know exactly how it is hidden...), and then apply a style class to the <div> that you want to pop up:

.hidden
{
     display: none; 
}

Also, give the <div> and id (it has to be unique for the markup to validate). You can then use jQuery, a neat javascript library that makes a lot of things easier when writing client-side code, to show and hide the tooltip with the following code:

$(document).ready(function() {
    $('#theMouseOverElement').hover(
        function() {
            $('#theToolTip').show();
        },
        function() {
            $('#theToolTip').hide();
        }
    );
});

If the above code looks like jibberish to you, take a look at the jQuery documentation, and especially the hover and show/hide functions.

Answer 2

You won't be able to "see" the content of your TemplateField because when you set the Visible property to false in the aspx, the html won't even be rendered and thus won't be available on the client.

What you want is put the content you want to hide/show inside a <div> tag, invisible by default by setting the display: hidden; in a css class, then use JavaScript to change the display property dynamically, and also the position if you want your "tooltip" to appear near the mouse.

Here is a link to a webcasts series that shows how to do this (among other things) using jQuery