|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
Announcements
Want a new Job?
Chapters
Services
Feature Zones
|
Note: This is an unedited contribution. If this article is inappropriate,
needs attention or copies someone else's work without reference then please
Report This Article
IntroductionThis 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 :). BackgroundGridView 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 codeFollowing 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
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||