How to change the gridview row colors in onclick event in javascript?

Question

I wrote the following GridView code in ASP.NET. I set the AlternatingRow style's BackColor to bisque. The remaining rows are set to white.

This code exists within my grdRequests_RowDataBound event:

if (e.Row.RowType == DataControlRowType.DataRow)
{
    e.Row.Attributes.Add("onclick", "ChangeRowColor(this)");
    e.Row.Attributes.Add("onmouseover", "this.style.cursor=\'pointer\'");
}

The JavaScript ChangeRowColor code above is as follows:

function ChangeRowColor(row) 
{
    if (previousRow == row) 
        return;         

    else if (previousRow != null)
        var color = row.style.backgroundColor;

    if (previousRow != null) {

        alert(color)

        if (color == "bisque") {
            previousRow.style.backgroundColor = "white";
        }
        else if (color == "white") {
            previousRow.style.backgroundColor = "bisque";
        }        
    }

    row.style.backgroundColor = "#ffffda";
    previousRow = row;    
}

When I click the row, I need to change the color like yellow. After selecting another row, I need to switch the previous row's color back to its old color, but in my code this doesn't work. Any suggestions?

Are you using (or able to use) jQuery in your project? There would be a way better solution for this... — Marc, Oct 19 '11 at 10:10
http://stackoverflow.com/questions/5630082/how-to-change-cell-background-color-on-click-cell-in-table — huMpty duMpty, Oct 19 '11 at 10:15

score 1 · Accepted Answer · answered Oct 19 '11 at 21:32

you can do like this...

 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 this is 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>

i hope it will helps you....

score 0 · Answer 2 · edited Jul 08 '16 at 05:17

You can call javascript function in GridView RowDataBound Event.

 protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)  
          {   
             if (e.Row.RowType == DataControlRowType.DataRow)    
                  {  
                e.Row.Attributes.Add("onClick", "ChangeColor('" + "GridView1','" + (e.Row.RowIndex+1).ToString() + "')");
            }
        }




    function ChangeColor(GridViewId, SelectedRowId) {
        var GridViewControl = document.getElementById(GridViewId);
        if (GridViewControl != null) {
            var GridViewRows = GridViewControl.rows;
            if (GridViewRows != null)
            {
                var SelectedRow = GridViewRows[SelectedRowId];
                //Remove Selected Row color if any
                for (var i = 1; i < GridViewRows.length; i++) {
                    var row = GridViewRows[i];
                    if (row == SelectedRow) {
                        //Apply Yellow color to selected Row
                        row.style.backgroundColor = "#ffffda";
                    }
                    else {
                        //Apply White color to rest of rows
                        row.style.backgroundColor = "#ffffff";
                    }
            }

            }
        }

    }

Marwan · Answer 3 · 2011-10-19T13:35:10.420

in ur function use the row object to get the rows to loop over them and return them to there default color

  function ChangeRowColor(row) 
     {   

          var rows = row.parentNode.getElementsByTagName('TR');
          //loop over all rows and set there colors to default
          for(var i =0;i<rows.length;i++)
            {
             rows[i].style.backgroundColor= 'White'; //if its your default color 
            }      
         //set the current row to be with the needed color
         row.style.backgroundColor = "YELLOW" //if this is the color needed onclick;
     }

Regards

How to change the gridview row colors in onclick event in javascript?

3 Answers3

Linked