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

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.

Comments and Discussions

QuestionCan I do something similar to hide/show columns? PinmemberMarlene Deyo18-Jun-09 10:34 
AnswerRe: Can I do something similar to hide/show columns? PinmemberArjun Arora18-Jun-09 14:50 
GeneralPlease help.Its very urgent PinmemberRathan Kumar7-Jun-09 20:33 
GeneralEnable Disable Controls PinmemberLove11114-Nov-08 1:50 
Questionnot working in firefox Pinmembermodeerftoall14-May-08 19:32 
QuestionHow Do I Make This Work With Drop Down List? Pinmembertcannon6-Nov-07 3:50 
GeneralJava script not working in FireFox PinmemberT.Ashraf14-Aug-07 13:31 
GeneralRe: Java script not working in FireFox PinmemberArjunSingh14-Aug-07 14:56 
GeneralRe: Java script not working in FireFox [modified] PinmemberT.Ashraf15-Aug-07 14:35 
GeneralInvisible Fields Pinmemberdspyank29-Mar-07 11:00 
GeneralRe: Invisible Fields PinmemberT.Ashraf14-Aug-07 9:04 
QuestionCan script account for alternate row background color PinmemberTim Vandeweerd20-Nov-06 11:41 

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 | Mobile
Web01 | 2.8.140721.1 | Last Updated 8 Oct 2006
Article Copyright 2006 by Arjun Arora
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid