Follow us

Tuesday, May 10, 2011

Changing row color in Grid View control on mouse events.

Background color of a row in a Grid View can be changed on mouse-over, mouse-out & mouse-click events using the following code and design:

Design (.aspx)

<div align="center">
        <asp:GridView ID="dgInfo" runat="server" OnRowDataBound="dgInfo_RowDataBound" Font-Names="Arial"
            Font-Size="11px" CellPadding="3" CellSpacing="2" Width="60%" BackColor="#F5D0A9">
                <HeaderStyle BackColor="#DF7401" ForeColor="#2E2E2E" Font-Bold="true" Font-Size="12px" />
        </asp:GridView>
</div>

Code Behind (.aspx.cs)

protected void dgInfo_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            e.Row.Attributes.Add("onclick", "this.style.backgroundColor='Orange'");
            e.Row.Attributes.Add("onmouseover", "this.style.backgroundColor='#FAAC58'");
            e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor='#F5D0A9'");
        }    
    }  

Download

Sr.No Download Size
1 Sample 716.51 KB

Digg Google Bookmarks reddit Mixx StumbleUpon Technorati Yahoo! Buzz DesignFloat Delicious BlinkList Furl

1 comments: on "Changing row color in Grid View control on mouse events."

DotNetFunda.Com Training said...

You do not need to write this many code behind code, just use the CSS style like explained in this article http://www.itfunda.com/how-to-display-mouseover-effect-on-gridview-rows-using-css/Free/152 and you are done.

So even if you have GridView on existing pages, just add on attribute in the GridView (on .aspx page) and add a small .css class and you are done.

Thanks :)

Post a Comment