I just blogged about on how you can change the GridViewRow color by simply moving your mouse pointer on it. Now you can also do an onlclick event on the GridViewRow which will highlight that particular row. The important thing to note is that when you click again on the highlighted row then it should come back to its orginal state. The code below uses the "hidden" field to solve this problem. Take a look at the code below:

 protected void MyGridView_RowCreated(object sender, GridViewRowEventArgs e)
    {

        string rowStyle = "this.style.backgroundColor
        = 'yellow'";
        string rowStyleClickedTwice =
        "this.style.backgroundColor = 'blue'";
        string rowID = String.Empty; 

        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            rowID = "row"+e.Row.RowIndex; 

            e.Row.Attributes.Add("id",
            "row"+e.Row.RowIndex);
            e.Row.Attributes.Add("onclick",
            "ChangeRowColor(" +"'" + rowID + "'" + ")");
        }       
    }

And now the Java Script code:

<input type="hidden" id="hiddenColor"  />

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

document.body.style.cursor = 'pointer'; 


function ChangeRowColor(rowID) 
{ 
   var color = document.getElementById(rowID)
   .style.backgroundColor;
   alert(color);   
   
   if(color != 'yellow') 
    document.getElementById("hiddenColor").style
    .backgroundColor = color;
    
    alert(oldColor); 
    
   if(color == 'yellow') 
    document.getElementById(rowID).style.backgroundColor
    = document.getElementById("hiddenColor").style.backgroundColor;
    else document.getElementById(rowID).style.backgroundColor = 'yellow';             
    
}

</script>

Now, when you click on the GridView row it will change the row background to yellow. When you click the row again then it will bring back the original color. So, in other words it does not matter if you are using Auto-Format to color your grid, the hidden field will save the previous state (color) of the GridView row and by clicking on the row twice the row will be assigned the original color.

powered by IMHO 1.3