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?
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?
Share Improve this question edited Oct 19, 2011 at 22:57 jwheron 2,5722 gold badges30 silver badges40 bronze badges asked Oct 19, 2011 at 10:06 hmkhmk 96910 gold badges38 silver badges70 bronze badges 3- Are you using (or able to use) jQuery in your project? There would be a way better solution for this... – Marc Commented Oct 19, 2011 at 10:10
- no i am not using jquery any way send me code i will try – hmk Commented Oct 19, 2011 at 10:15
- stackoverflow./questions/5630082/… – huMpty duMpty Commented Oct 19, 2011 at 10:15
3 Answers
Reset to default 1you 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....
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
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";
}
}
}
}
}