JavaScript with ASP.NET tutorial

Adding JavaScript to ASP NET controls

Link for all dot net and sql server video tutorial playlists
http://www.youtube.com/user/kudvenkat/playlists

Link for slides, code samples and text version of the video
http://csharp-video-tutorials.blogspot.com/2015/03/change-gridview-row-color-when-checkbox.html

In this video we will discuss how to change gridview row color when checkbox is checked. We want to achieve this using JavaScript.

The background color of the rows that are select should be grey, and the rows that are not selected should be white.

We will continue with the example that we worked with in Part 3 of JavaScript with ASP.NET tutorial.

Modify HeaderCheckBoxClick() and ChildCheckBoxClick() JavaScript functions as shown below.

[script type=”text/javascript” language=”javascript”]
function HeaderCheckBoxClick(checkbox)
{
var gridView = document.getElementById(“GridView1”);
for (i = 1; i [ gridView.rows.length; i++)
{
gridView.rows[i].cells[0].getElementsByTagName(“INPUT”)[0].checked = checkbox.checked;
// Depending on whether the checkbox in the header is checked or
// unchecked change the background color of the data rows in the GridView
if (checkbox.checked)
{
gridView.rows[i].style.background = ‘#CCCCCC’;
}
else
{
gridView.rows[i].style.background = ‘#FFFFFF’;
}
}
}

function ChildCheckBoxClick(checkbox) {
var atleastOneCheckBoxUnchecked = false;
var gridView = document.getElementById(“GridView1”);

for (i = 1; i [ gridView.rows.length; i++)
{
// Depending on whether the checkbox in the data row is checked or
// unchecked change the background color of the rows in the GridView
if (gridView.rows[i].cells[0].getElementsByTagName(“INPUT”)[0].checked == false)
{
gridView.rows[i].style.background = ‘#FFFFFF’;
atleastOneCheckBoxUnchecked = true;
}
else
{
gridView.rows[i].style.background = ‘#CCCCCC’;
}
}

gridView.rows[0].cells[0].getElementsByTagName(“INPUT”)[0].checked = !atleastOneCheckBoxUnchecked;
}
[/script]

The following code makes the text in a GridView row bold on mouseover and normal on mouseout
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
e.Row.Attributes.Add(“onmouseover”, “this.style.fontWeight = ‘bold’;”);
e.Row.Attributes.Add(“onmouseout”, “this.style.fontWeight= ‘normal’;”);
}
}