Click here to Skip to main content
Click here to Skip to main content

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


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 Smile | :) .


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;

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()
        End If
    End Sub

Before clicking the row

After clicking the row


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


About the Author

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.

Comments and Discussions

GeneralHighlight a particular row in a gridview on MouseOver PinmemberBinu198517-Jun-14 3:04 
GeneralY? this Much Pain Use THE INBUILD COMMANDS OF ASP>NET PingroupRAKESH CHAUBEY25-Aug-12 8:33 
GeneralMy vote of 5 Pinmembermhm36231-Oct-11 20:01 
GeneralMy vote of 4 Pinmemberlinda mathew26-Mar-11 5:16 
GeneralHandling Postbacks Pinmemberscottch15-Jun-10 6:18 
Generalthanks Pinmemberadolfhardik9-Jun-10 21:08 
GeneralMy vote of 1 PinmemberSaeed Alg24-Apr-10 0:38 
Generalupdate PreviousRowColor PinmemberMember 440165415-Apr-09 21:53 
GeneralHi faraz PinmemberVimalSaifudin26-Sep-08 20:40 
QuestionGreat Solution But How Do I Handle Postbacks? Pinmembereggnturtle20-Sep-08 12:45 
AnswerRe: Great Solution But How Do I Handle Postbacks? Pinmemberfarazsk1120-Sep-08 21:06 
GeneralRe: Great Solution But How Do I Handle Postbacks? Pinmembereggnturtle21-Sep-08 5:14 
GeneralGood work PinmemberMember 41834088-Sep-08 20:05 
GeneralRediculously simplistic PinmemberOakman5-Apr-08 13:40 
GeneralRe: Rediculously simplistic Pinmemberfarazsk115-Apr-08 19:48 
GeneralRe: Rediculously simplistic PinmemberOakman6-Apr-08 2:24 
GeneralRe: Rediculously simplistic Pinmemberfarazsk116-Apr-08 3:17 
GeneralMultiple Rows PinmemberDigitalRacer4-Apr-08 12:56 
GeneralRe: Multiple Rows Pinmemberfarazsk115-Apr-08 19:44 
GeneralGood Work PinmemberIrwan Hassan26-Mar-08 18:41 
GeneralRe: Good Work Pinmemberfarazsk1127-Mar-08 16:43 
Generalthanks Pinmemberjomet19-Mar-08 18:53 
GeneralRe: thanks Pinmemberfarazsk1120-Mar-08 7:37 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    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.141223.1 | Last Updated 19 Mar 2008
Article Copyright 2008 by farazsk11
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid