Introduction
This article is about changing the color of a GridView row on mouse click without having a postback on the page. In order to achieve this we will be using some javascript and off course the GridView Control itself :).
Background
GridView is a server side control that contains Rows and Columns. In some cases we want to do something more than the straight forward functionality of the GridView control depending on the functional/UI requirements of the application.
Using the code
Following javascript will be used to change the color of the row.
<script type="text/javascript">
var previousRow;
function ChangeRowColor(row)
{
if (previousRow == row)
return;
else if (previousRow != null)
document.getElementById(previousRow).style.backgroundColor = "#ffffff";
document.getElementById(row).style.backgroundColor = "#ffffda";
previousRow = row;
}
</script>
Following code will be required on GridView1_RowDataBound event
Protected Sub GridView1_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) _
Handles GridView1.RowDataBound
If (e.Row.RowType = DataControlRowType.DataRow) Then
e.Row.Attributes.Add("onclick", "javascript:ChangeRowColor('" & e.Row.ClientID & "')")
End If
End Sub
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Not IsPostBack Then
'FillDataTable is a function that will return a DataTable
'with some values and is available in the code for download.
Me.GridView1.DataSource = Me.FillDataTable()
Me.GridView1.DataBind()
End If
End Sub
Before clicking the row
After clicking the row