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

Hotmail-like Mouse Over & Mouse Out Effects on GridView

By , 8 Mar 2008
Rate this:
Please Sign up or sign in to vote.

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)

About the Author

Samir NIGAM
Architect 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:


Comments and Discussions

 
GeneralMouse-over event on gridview Pinmembernaresh150716-Sep-09 19:01 
GeneralSlight Variation PinmemberGhost Shield7-Dec-08 12:20 
GeneralRe: Slight Variation PinmemberSameer NIGAM9-Dec-08 2:02 
GeneralUsing Css PinmemberAbishek Bellamkonda4-Mar-08 13:16 
GeneralRe: Using Css Pinmember SAMir Nigam 21-May-08 18:14 
Questionproblem with ClientID Pinmembert-fuse28-Feb-08 21:33 
GeneralRe: problem with ClientID Pinmember Samir Nigam 3-Mar-08 16:58 
GeneralRe: problem with ClientID Pinmembert-fuse4-Mar-08 1:03 
GeneralRe: problem with ClientID Pinmember Samir Nigam 4-Mar-08 3:43 
GeneralNice effort keep it up. PinmemberSecrets5-Feb-08 18:17 
GeneralRe: Nice effort keep it up. Pinmember Samir Nigam 5-Feb-08 20:39 
GeneralThe article is not matching at all as per one of our Criticizer PinmemberSandeep Shekhar30-Jan-08 18:35 
GeneralRe: The article is not matching at all as per one of our Criticizer PinmemberSamir Nigam30-Jan-08 18:46 
GeneralI did something simliar PinmvpSacha Barber30-Jan-08 4:40 
GeneralRe: I did something simliar PinmemberSamir Nigam30-Jan-08 18:04 
GeneralRe: I did something simliar PinmvpSacha Barber30-Jan-08 22:20 
GeneralRe: I did something simliar [modified] PinmemberI Never Look Behind30-Jan-08 18:53 
GeneralRe: I did something simliar PinmvpSacha Barber30-Jan-08 22:20 
GeneralRe: I did something simliar [modified] PinmemberRanjan.D9-Mar-08 19:03 
GeneralNice PinmemberHonest30-Jan-08 1:20 
GeneralRe: Nice PinmemberI Never Look Behind30-Jan-08 18:54 
GeneralRe: Nice PinmemberSamir Nigam30-Jan-08 18:56 
GeneralHi Samir PinmemberMCSDvikasmisra30-Jan-08 1:04 
GeneralRe: Hi Samir PinmemberSamir Nigam30-Jan-08 1:12 

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 | Mobile
Web02 | 2.8.140415.2 | Last Updated 8 Mar 2008
Article Copyright 2008 by Samir NIGAM
Everything else Copyright © CodeProject, 1999-2014
Terms of Use
Layout: fixed | fluid