Click here to Skip to main content
13,559,528 members
Click here to Skip to main content
Add your own
alternative version


15 bookmarked
Posted 8 Oct 2006
Licenced CPOL

Row level JavaScript for GridView

, 8 Oct 2006
Rate this:
Please Sign up or sign in to vote.
This article expalins how to attach JavaScript functions to GridView rows and fields.


This sample explains how to attach JavaScript methods/functions to an ASP.NET GridView control at row level. The user experience here is far better, and the client handles user actions, and there are fewer postbacks. In this sample, there is a checkbox on the grid. When the user checks the checkbox, the row color changes, indicating the user that the particular record is selected. When the user selects an option in the column 'Discontinued?', the text box in the column 'Reason to Discontinue?' for that row shows up.

Sample Image - GridViewJavascript.gif

//Javascript function to change background color of GridRow
function ColorRow(CheckBoxObj)
    if (CheckBoxObj.checked == true) {'#88AAFF';

This method is attached to checkbox on the rowDatabound event of the GridView.

if (e.Row.RowType == DataControlRowType.DataRow)
               "onClick", "ColorRow(this)");

The other functionality demonstrated here is how to make the control visible and invisible based on user selection. When the user selects the Yes option in the column Discontinued, the textbox for the explanation becomes visible. The JavaScript to toggle control visibility is as follows:

function ShowHideField(DecisionControl, ToggleControl)
    var DecisionValue = getRadioSelectedValue(DecisionControl);
    if (DecisionValue =='True') 

This JavaScript method/function is attached in the RowDataBound event of the GridView as follows:

if (e.Row.RowType == DataControlRowType.DataRow)
   TextBox  txtReasonDiscontinue =  
   RadioButtonList rblDiscontinue = 
   string strDicontinued = rblDiscontinue.SelectedValue;
   if (String.Compare(strDicontinued.Trim(), "False", true) == 0)
        txtReasonDiscontinue.Attributes.Add("Style", "visibility:hidden");
       "ShowHideField(this," + txtReasonDiscontinue.ClientID + ")");


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


About the Author

Arjun Arora
Web Developer
United States United States
Nothing special about me.

You may also be interested in...


Comments and Discussions

QuestionCan I do something similar to hide/show columns? Pin
Marlene Deyo18-Jun-09 10:34
memberMarlene Deyo18-Jun-09 10:34 
AnswerRe: Can I do something similar to hide/show columns? Pin
Arjun Arora18-Jun-09 14:50
memberArjun Arora18-Jun-09 14:50 
GeneralPlease help.Its very urgent Pin
Rathan Kumar7-Jun-09 20:33
memberRathan Kumar7-Jun-09 20:33 
GeneralEnable Disable Controls Pin
Love11114-Nov-08 1:50
memberLove11114-Nov-08 1:50 
Questionnot working in firefox Pin
modeerftoall14-May-08 19:32
membermodeerftoall14-May-08 19:32 
QuestionHow Do I Make This Work With Drop Down List? Pin
tcannon6-Nov-07 3:50
membertcannon6-Nov-07 3:50 
GeneralJava script not working in FireFox Pin
T.Ashraf14-Aug-07 13:31
memberT.Ashraf14-Aug-07 13:31 
GeneralRe: Java script not working in FireFox Pin
ArjunSingh14-Aug-07 14:56
memberArjunSingh14-Aug-07 14:56 
GeneralRe: Java script not working in FireFox [modified] Pin
T.Ashraf15-Aug-07 14:35
memberT.Ashraf15-Aug-07 14:35 
GeneralInvisible Fields Pin
dspyank29-Mar-07 11:00
memberdspyank29-Mar-07 11:00 
GeneralRe: Invisible Fields Pin
T.Ashraf14-Aug-07 9:04
memberT.Ashraf14-Aug-07 9:04 
QuestionCan script account for alternate row background color Pin
Tim Vandeweerd20-Nov-06 11:41
memberTim Vandeweerd20-Nov-06 11:41 

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.

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web03 | 2.8.180527.1 | Last Updated 8 Oct 2006
Article Copyright 2006 by Arjun Arora
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid