Click here to Skip to main content
12,406,528 members (27,290 online)
Click here to Skip to main content
Add your own
alternative version

Stats

91.4K views
612 downloads
82 bookmarked
Posted

Hotmail-like Mouse Over & Mouse Out Effects on GridView

, 8 Mar 2008 CPOL
Rate this:
Please Sign up or sign in to vote.
This article describes how to apply client-side mouse over & mouse out effects on the GridView’s rows.

Introduction

If you have a Hotmail Windows Live ID email account, then you have already observed mouse over and mouse out effects on the rows of an Inbox’s grid. On a mouse over event of any row of the Inbox’s grid, a CheckBox appears in place of an Image. Similarly, on a mouse out event, an Image appears in place of a CheckBox.

There are three types of images that appear in place of a CheckBox. If the message is unread, then the message.png Image appears. If the message is read, then the message_open.png Image appears. If the message has been replied to, then the message_reply.png Image appears.

Now if we make a CheckBox checked that appears on a row due to a mouse over event, then the mouse over and mouse out effects on that row get disabled. If we make that CheckBox unchecked, then the mouse over and mouse out effects start to work for that row again.

Now I'm going to present this functionality with the help of the GridView control. In this small application, I'm going to use only a single Image rather than use all three images. On a mouse over event for a row, a CheckBox will appear. On a mouse out event, an Image will appear. If we make CheckBox checked, then the mouse over and mouse out effects on that row will get disabled. Further, on making that CheckBox unchecked, mouse over and mouse out effects will start to work for that row again.

I have also implemented row coloring of GridView on mouse over and mouse out events in this application.

HTML Code

Use a TemplateField inside the GridView and put a CheckBox and an Image in the ItemTemplate of the TemplateField. The HTML code for GridView will look like this:

<asp:GridView ID="gvHotmail" runat="server" AutoGenerateColumns="False"
    OnRowDataBound="gvHotmail_RowDataBound">
            <Columns>
                <asp:BoundField HeaderText="n" DataField="n">
                    <HeaderStyle Width="50px" />
                    <ItemStyle Width="50px" />
                </asp:BoundField>
                <asp:TemplateField>
                    <ItemTemplate>
                        <input id="chkBxMail" type="checkbox" runat="server" />
                        <asp:Image ID="imgMail" runat="server" ImageUrl="~/mail.png" />
                    </ItemTemplate>
                    <HeaderStyle Width="50px" />
                    <ItemStyle Width="50px" />
                </asp:TemplateField>
                <asp:BoundField HeaderText="n*n" DataField="nn">
                    <HeaderStyle Width="100px" />
                    <ItemStyle Width="100px" />
                </asp:BoundField>
            </Columns>
            <HeaderStyle Height="25px" BackColor="DarkOrange"
                HorizontalAlign="Center" VerticalAlign="Middle" />
            <RowStyle Height="25px" BackColor="NavajoWhite"
                HorizontalAlign="Center" VerticalAlign="Middle" />
            <AlternatingRowStyle Height="25px" BackColor="Gold"
                HorizontalAlign="Center" VerticalAlign="Middle" />
 </asp:GridView>

C# Code

Put the following code in the RowDataBound event of GridView:

if (e.Row.RowType == DataControlRowType.DataRow && (
    e.Row.RowState == DataControlRowState.Normal || e.Row.RowState ==
    DataControlRowState.Alternate))
        {
            HtmlInputCheckBox chkBxMail =
                (HtmlInputCheckBox)e.Row.Cells[1].FindControl("chkBxMail");
            Image imgMail = (Image)e.Row.Cells[1].FindControl("imgMail");

            e.Row.Attributes["onmouseover"] =
                string.Format("javascript:ItemMouseOver(this,'{0}','{1}');",
                chkBxMail.ClientID, imgMail.ClientID);
            e.Row.Attributes["onmouseout"] =
                string.Format("javascript:ItemMouseOut(this,'{0}','{1}');",
                chkBxMail.ClientID, imgMail.ClientID);

            chkBxMail.Attributes["style"] = "display:none;";
        } 

In the above code, first I have ensured that the row is either Normal or Alternate. After that, I have gotten the references of the CheckBox and Image controls and attached client-side mouse over and mouse out events on them. I have also added a style [display:none;] on the CheckBox control so that initially CheckBox will not appear.

JavaScript Code

Put this JavaScript in the page's head section.

<script type="text/javascript">
    function ItemMouseOver(oRow, chkBxMail, imgMail)
    {
        oCheckBox = document.getElementById(chkBxMail);
        oImage = document.getElementById(imgMail);

        if(!oCheckBox.checked)
        {
            oCheckBox.style.display = '';
            oImage.style.display = 'none';
            oRow.originalBackgroundColor = oRow.style.backgroundColor
            oRow.style.backgroundColor = 'White';
        }
    }

    function ItemMouseOut(oRow, chkBxMail, imgMail)
    {
        oCheckBox = document.getElementById(chkBxMail);
        oImage = document.getElementById(imgMail);

        if(!oCheckBox.checked)
        {
            oCheckBox.style.display = 'none';
            oImage.style.display = '';
            oRow.style.backgroundColor = oRow.originalBackgroundColor;
        }
    }
</script>

In the above script, there are two functions: ItemMouseOver and ItemMouseOut. ItemMouseOver is called on mouse over events and ItemMouseOut is called on mouse out events for GridView rows. In the ItemMouseOver function, CheckBox appears and Image disappears. In the ItemMouseOut function, CheckBox disappears and Image appears. In both functions, appearing/disappearing effects will reflect provided the CheckBox is unchecked. I have also used some coloring effects on mouse over and mouse out effects respectively.

Supporting Browsers

I have tested this script on the following browsers:

Browsers.png

History

  • 30 January, 2008 -- Original version posted
  • 6 February, 2008 -- Article edited
  • 5 March, 2008 -- Article updated

License

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

Share

About the Author

Samir NIGAM
Technical Lead Infogain India Pvt Ltd
India India

Samir NIGAM is a Microsoft Certified Professional. He is an insightful IT professional with results-driven comprehensive technical skill having rich, hands-on work experience n web-based applications using ASP.NET, C#, AJAX, Web Service, WCF, jQuery, Microsoft Enterprise Library , LINQ, MS Entity Framework, nHibernate, MS SQL Server & SSRS.

He has earned his master degree (MCA) from U.P. Technical University, Lucknow, INDIA, his post graduate dipoma (PGDCA ) from Institute of Engineering and Rural Technology, Allahabad, INDIA and his bachelor degree (BSc - Mathematics) from University of Allahabad, Allahabad, INDIA.

He has good knowledge of Object Oriented Programming, n-Tier Architecture, SOLID Principle, and Algorithm Analysis & Design as well as good command over cross-browser client side programming using JavaScript & jQuery,.

Awards:


You may also be interested in...

Comments and Discussions

 
GeneralMouse-over event on gridview Pin
naresh150716-Sep-09 19:01
membernaresh150716-Sep-09 19:01 
GeneralSlight Variation Pin
Ghost Shield7-Dec-08 12:20
memberGhost Shield7-Dec-08 12:20 
GeneralRe: Slight Variation Pin
Sameer NIGAM9-Dec-08 2:02
memberSameer NIGAM9-Dec-08 2:02 
GeneralUsing Css Pin
Abishek Bellamkonda4-Mar-08 13:16
memberAbishek Bellamkonda4-Mar-08 13:16 
GeneralRe: Using Css Pin
SAMir Nigam 21-May-08 18:14
member SAMir Nigam 21-May-08 18:14 
Questionproblem with ClientID Pin
t-fuse28-Feb-08 21:33
membert-fuse28-Feb-08 21:33 
GeneralRe: problem with ClientID Pin
Samir Nigam 3-Mar-08 16:58
member Samir Nigam 3-Mar-08 16:58 
GeneralRe: problem with ClientID Pin
t-fuse4-Mar-08 1:03
membert-fuse4-Mar-08 1:03 
GeneralRe: problem with ClientID Pin
Samir Nigam 4-Mar-08 3:43
member Samir Nigam 4-Mar-08 3:43 
GeneralNice effort keep it up. Pin
Secrets5-Feb-08 18:17
memberSecrets5-Feb-08 18:17 
GeneralRe: Nice effort keep it up. Pin
Samir Nigam 5-Feb-08 20:39
member Samir Nigam 5-Feb-08 20:39 
GeneralThe article is not matching at all as per one of our Criticizer Pin
Sandeep Shekhar30-Jan-08 18:35
memberSandeep Shekhar30-Jan-08 18:35 
GeneralRe: The article is not matching at all as per one of our Criticizer Pin
Samir Nigam30-Jan-08 18:46
memberSamir Nigam30-Jan-08 18:46 
GeneralI did something simliar Pin
Sacha Barber30-Jan-08 4:40
mvpSacha Barber30-Jan-08 4:40 
GeneralRe: I did something simliar Pin
Samir Nigam30-Jan-08 18:04
memberSamir Nigam30-Jan-08 18:04 
GeneralRe: I did something simliar Pin
Sacha Barber30-Jan-08 22:20
mvpSacha Barber30-Jan-08 22:20 
GeneralRe: I did something simliar [modified] Pin
I Never Look Behind30-Jan-08 18:53
memberI Never Look Behind30-Jan-08 18:53 
GeneralRe: I did something simliar Pin
Sacha Barber30-Jan-08 22:20
mvpSacha Barber30-Jan-08 22:20 
GeneralRe: I did something simliar [modified] Pin
Ranjan.D9-Mar-08 19:03
memberRanjan.D9-Mar-08 19:03 
GeneralNice Pin
Honest30-Jan-08 1:20
memberHonest30-Jan-08 1:20 
GeneralRe: Nice Pin
I Never Look Behind30-Jan-08 18:54
memberI Never Look Behind30-Jan-08 18:54 
GeneralRe: Nice Pin
Samir Nigam30-Jan-08 18:56
memberSamir Nigam30-Jan-08 18:56 
GeneralHi Samir Pin
MCSDvikasmisra30-Jan-08 1:04
memberMCSDvikasmisra30-Jan-08 1:04 
GeneralRe: Hi Samir Pin
Samir Nigam30-Jan-08 1:12
memberSamir Nigam30-Jan-08 1:12 

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.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.160730.1 | Last Updated 8 Mar 2008
Article Copyright 2008 by Samir NIGAM
Everything else Copyright © CodeProject, 1999-2016
Layout: fixed | fluid