Hotmail-like Mouse Over & Mouse Out Effects on GridView

• Download source - 6.53 KB

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 Image appears. If the message is read, then the Image appears. If the message has been replied to, then the 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:

History

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