Click here to Skip to main content
11,479,083 members (63,269 online)
Click here to Skip to main content

Change the GridView row color on click without postback

, 18 Mar 2008 CPOL 109K 1K 31
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 Smile | :) .

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.

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    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
Web02 | 2.8.150520.1 | Last Updated 19 Mar 2008
Article Copyright 2008 by farazsk11
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid