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
Faraz is working as a Senior Software Engineer for a company located in Sharjah, UAE. He likes developing new applications with the latest technologies. Mostly reponsible for web applications using Microsoft.Net. He has done MCPD so far. Other than work play guitars, sing and play PSP.