How to: Change color of rows in GridView on mouseover

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):-

<script language=javascript type="text/javascript">

    function mouseovercolor(mytxt) {

        mytxt.bgColor = 'Orange';

    }

    function mouseoutcolor(mytxt) {

        element.bgColor = 'White';

    }

</script>