How to: Change color of rows in GridView on mouseover

Mahak Gupta

16y24.4k0100Article

In this article I will show you how to change color of row in GridView on mouseover.

Please Try this:

Step 1: Fill the Gridview With the help of Database like:

SqlConnection conn1 = new SqlConnection(ConfigurationManager.ConnectionStrings["conn"].ConnectionString);

SqlDataAdapter da1 = new SqlDataAdapter("select fname,lname,city from cust", conn1);

DataSet ds1 = new DataSet();

da1.Fill(ds1);

GridView1.DataSource = ds1;

GridView1.DataBind();

Step 2: Now we call the javascript on the Gridview on the GridView1_RowDataBound:

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)

{

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

{

e.Row.Attributes["onmouseover"] =

"javascript:mouseovercolor(this);";

e.Row.Attributes["onmouseout"] =

"javascript:mouseoutcolor(this);";

}

Step 3: In the aspx page( call the funtion):-

function mouseovercolor(mytxt) {

mytxt.bgColor = 'Orange';

}

function mouseoutcolor(mytxt) {

element.bgColor = 'White';

}

</script>

Now run the page and see the desired result.

change gridview row color through javascriptgridview row color javascriptgridview row color through javascripthow to change gridview row color through javascript

Comments

Join the conversation! Your thoughts help the community grow.