Geeks With Blogs
AzamSharp Some day I will know everything. I hope that day never comes.

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

Posted on Tuesday, April 11, 2006 9:26 PM | Back to top


Comments on this post: Changing the Color Using GridViewRow OnClick Event And Remebering the Past Colors

# re: Changing the Color Using GridViewRow OnClick Event And Remebering the Past Colors
Requesting Gravatar...
You can also use the public variable instead of hidden field.
Left by azamsharp on Apr 11, 2006 8:17 PM

# re: Changing the Color Using GridViewRow OnClick Event And Remebering the Past Colors
Requesting Gravatar...
I want total code on menus using javascript in asp.net?
Left by prasad on Mar 28, 2007 5:47 AM

# re: Changing the Color Using GridViewRow OnClick Event And Remebering the Past Colors
Requesting Gravatar...
plz check thi site also
Left by pallavis eth on Aug 11, 2010 5:39 PM

Your comment:
 (will show your gravatar)


Copyright © Mohammad Azam | Powered by: GeeksWithBlogs.net