Click here to Skip to main content
12,698,531 members (23,666 online)
Click here to Skip to main content
Add your own
alternative version

Stats

123.5K views
1.1K downloads
31 bookmarked
Posted

Change the GridView row color on click without postback

, 18 Mar 2008 CPOL
Rate this:
Please Sign up or sign in to vote.
Article about changing the GridView row color on mouse click without postback

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">
   //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

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

farazsk11
Web Developer
United Arab Emirates United Arab Emirates
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.

You may also be interested in...

Comments and Discussions

 
GeneralHighlight a particular row in a gridview on MouseOver Pin
Binu198517-Jun-14 3:04
memberBinu198517-Jun-14 3:04 
GeneralY? this Much Pain Use THE INBUILD COMMANDS OF ASP>NET Pin
RAKESH CHAUBEY25-Aug-12 8:33
groupRAKESH CHAUBEY25-Aug-12 8:33 
GeneralMy vote of 5 Pin
mhm36231-Oct-11 20:01
membermhm36231-Oct-11 20:01 
GeneralMy vote of 4 Pin
linda mathew26-Mar-11 5:16
memberlinda mathew26-Mar-11 5:16 
GeneralHandling Postbacks Pin
scottch15-Jun-10 6:18
memberscottch15-Jun-10 6:18 
Generalthanks Pin
adolfhardik9-Jun-10 21:08
memberadolfhardik9-Jun-10 21:08 
GeneralMy vote of 1 Pin
Saeed Alg24-Apr-10 0:38
memberSaeed Alg24-Apr-10 0:38 
Generalupdate PreviousRowColor Pin
Member 440165415-Apr-09 21:53
memberMember 440165415-Apr-09 21:53 
GeneralHi faraz Pin
VimalSaifudin26-Sep-08 20:40
memberVimalSaifudin26-Sep-08 20:40 
QuestionGreat Solution But How Do I Handle Postbacks? Pin
eggnturtle20-Sep-08 12:45
membereggnturtle20-Sep-08 12:45 
AnswerRe: Great Solution But How Do I Handle Postbacks? Pin
farazsk1120-Sep-08 21:06
memberfarazsk1120-Sep-08 21:06 
GeneralRe: Great Solution But How Do I Handle Postbacks? Pin
eggnturtle21-Sep-08 5:14
membereggnturtle21-Sep-08 5:14 
GeneralGood work Pin
Member 41834088-Sep-08 20:05
memberMember 41834088-Sep-08 20:05 
GeneralRediculously simplistic Pin
Oakman5-Apr-08 13:40
memberOakman5-Apr-08 13:40 
GeneralRe: Rediculously simplistic Pin
farazsk115-Apr-08 19:48
memberfarazsk115-Apr-08 19:48 
GeneralRe: Rediculously simplistic Pin
Oakman6-Apr-08 2:24
memberOakman6-Apr-08 2:24 
GeneralRe: Rediculously simplistic Pin
farazsk116-Apr-08 3:17
memberfarazsk116-Apr-08 3:17 
GeneralMultiple Rows Pin
DigitalRacer4-Apr-08 12:56
memberDigitalRacer4-Apr-08 12:56 
GeneralRe: Multiple Rows Pin
farazsk115-Apr-08 19:44
memberfarazsk115-Apr-08 19:44 
GeneralGood Work Pin
Irwan Hassan26-Mar-08 18:41
memberIrwan Hassan26-Mar-08 18:41 
GeneralRe: Good Work Pin
farazsk1127-Mar-08 16:43
memberfarazsk1127-Mar-08 16:43 
Generalthanks Pin
jomet19-Mar-08 18:53
memberjomet19-Mar-08 18:53 
GeneralRe: thanks Pin
farazsk1120-Mar-08 7:37
memberfarazsk1120-Mar-08 7:37 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.170118.1 | Last Updated 19 Mar 2008
Article Copyright 2008 by farazsk11
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid