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 :).
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.
Following javascript will be used to change the color of the row.
<script type="text/javascript">
//variable that will store the id of the last clicked row
var previousRow;
function ChangeRowColor(row)
{
//If last clicked row and the current clicked row are same
if (previousRow == row)
return;//do nothing
//If there is row clicked earlier
else if (previousRow != null)
//change the color of the previous row back to white
document.getElementById(previousRow).style.backgroundColor = "#ffffff";
//change the color of the current row to light yellow
document.getElementById(row).style.backgroundColor = "#ffffda";
//assign the current row id to the previous row id
//for next row to be clicked
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
| You must Sign In to use this message board. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
