Click here to Skip to main content
11,477,625 members (76,192 online)
Click here to Skip to main content

Row level JavaScript for GridView

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

Introduction

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) {
        CheckBoxObj.parentElement.parentElement.style.backgroundColor='#88AAFF';
    }
    else
    {
        CheckBoxObj.parentElement.parentElement.style.backgroundColor='#FFFFFF';
    }
}

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

if (e.Row.RowType == DataControlRowType.DataRow)
{
    ((CheckBox)e.Row.FindControl("CheckMark")).Attributes.Add(
               "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') 
    {
        ToggleControl.style.visibility='visible';
    }
    else
    {
        ToggleControl.style.visibility='hidden';
    }
}

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

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

License

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

Share

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? Pin
Marlene Deyo18-Jun-09 11:34
memberMarlene Deyo18-Jun-09 11:34 
AnswerRe: Can I do something similar to hide/show columns? Pin
Arjun Arora18-Jun-09 15:50
memberArjun Arora18-Jun-09 15:50 
GeneralPlease help.Its very urgent Pin
Rathan Kumar7-Jun-09 21:33
memberRathan Kumar7-Jun-09 21:33 
GeneralEnable Disable Controls Pin
Love11114-Nov-08 2:50
memberLove11114-Nov-08 2:50 
Questionnot working in firefox Pin
modeerftoall14-May-08 20:32
membermodeerftoall14-May-08 20:32 
QuestionHow Do I Make This Work With Drop Down List? Pin
tcannon6-Nov-07 4:50
membertcannon6-Nov-07 4:50 
GeneralJava script not working in FireFox Pin
T.Ashraf14-Aug-07 14:31
memberT.Ashraf14-Aug-07 14:31 
GeneralRe: Java script not working in FireFox Pin
ArjunSingh14-Aug-07 15:56
memberArjunSingh14-Aug-07 15:56 
GeneralRe: Java script not working in FireFox [modified] Pin
T.Ashraf15-Aug-07 15:35
memberT.Ashraf15-Aug-07 15:35 
GeneralInvisible Fields Pin
dspyank29-Mar-07 12:00
memberdspyank29-Mar-07 12:00 
GeneralRe: Invisible Fields Pin
T.Ashraf14-Aug-07 10:04
memberT.Ashraf14-Aug-07 10:04 
QuestionCan script account for alternate row background color Pin
Tim Vandeweerd20-Nov-06 12:41
memberTim Vandeweerd20-Nov-06 12: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 | Terms of Use | Mobile
Web01 | 2.8.150520.1 | Last Updated 8 Oct 2006
Article Copyright 2006 by Arjun Arora
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid