Change the Background Row Color of the GridView control using MouseEvents

Syedshakeer
Posted by in ASP.NET category on for Beginner level | Views : 8939 red flag

By using this Article you can learn how to change BackGround Color of a Row in Gridview when user moves mouse on a particular selecting Row.



First Drag and Drop one Gridview Control on a webpage.After Retriving  the data in a gridvew select your gridview and choose Events.In Events DoubleClik on RowDataBound.

after DoubleCliking on RowDataBound Event you will get a code in .aspx.cs as Below:

protected void GridView2_RowDataBound(object sender, GridViewRowEventArgs e)

{

}

In Above RowDataBound event add onmouseover and onmouseout Events.The Color can be set by using this.style.backgroundcolor='red'

if (e.Row.RowType == DataControlRowType.DataRow)

{

e.Row.Attributes.Add("onmouseover", "this.style.backgroundColor='Silver'");

e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor='green'");

}

when you press F5 Button the  OutPut is as Follows

 

when the user Moves Mouseover or MouseOut on Gridview the Particular selecting Row on gridview changes the BackGround Color .Simple output Image is Below. 

 

The Complete coding is below:

<asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="False" BorderColor="#400000"

DataKeyNames="ID" DataSourceID="SqlDataSource1" OnRowDataBound="GridView2_RowDataBound"

Style="z-index: 102; left: 133px; position: absolute; top: 154px" Height="219px" Width="196px">

<Columns>

<asp:BoundField DataField="ID" HeaderText="ID" InsertVisible="False" ReadOnly="True"

SortExpression="ID" />

<asp:BoundField DataField="empname" HeaderText="empname" SortExpression="empname" />

<asp:BoundField DataField="salary" HeaderText="salary" SortExpression="salary" />

</Columns>

<HeaderStyle BackColor="Aqua" ForeColor="Black" />

</asp:GridView>

in .aspx.cs

protected void GridView2_RowDataBound(object sender, GridViewRowEventArgs e)

{

if (e.Row.RowType == DataControlRowType.DataRow)

{

e.Row.Attributes.Add("onmouseover", "this.style.backgroundColor='Silver'");

e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor='green'");

}

}

Page copy protected against web site content infringement by Copyscape

About the Author

Syedshakeer
Full Name: Syed Shakeer Hussiain P
Member Level:
Member Status: Member
Member Since: 2/5/2009 3:12:18 AM
Country: India
Syed Shakeer Hussain
http://www.dotnetfunda.com
Shakeer Hussain has completed his Master of Computer Applications degree from Deccan College of engg and technology of Osmania University.He is a MVM of www.dotnetspider.com.He has good experience in the areas of ASP.NET, C#.NET, VB.NET, SQL SERVER 2000/2005 and Windows Mobile. He has worked in Windows Mobile,Web Applicatin and ERP projects.

Login to vote for this post.

Comments or Responses

Posted by: Avicool08 on: 5/22/2009
Good article...

very Handy... one...

Thanks


Login to post response

Comment using Facebook(Author doesn't get notification)