Click here to Skip to main content
11,704,107 members (56,299 online)
Click here to Skip to main content

Check/uncheck CheckBox in a GridView using Javascript

, 29 Mar 2008 CPOL 259K 4.4K 56
Rate this:
Please Sign up or sign in to vote.
Check/uncheck CheckBox control inside a GridView using javascript without postback.

Introduction

Check/uncheck CheckBox control inside a GridView using javascript without postback. This article will give an idea on how to achieve this task.

Some sample code is provided under Using the code heading and complete code is available in the project download.

Background

(Forums are flooded with the questions about how to check/uncheck CheckBox control inside a GridView using javascript without postback.

How To’s:

In this article a GridView control is used. Inside the GridView control there are 3 fields. One template field and two are bound fields to display some sample data.

Inside the TemplateField a CheckBox control is placed in the HeaderTemplate (with ID cbSelectAll and Text Select All), ItemTemplate and AlternatingItemTemplate.

Using the code

Code that will be required to achieve this task.

Javascript that will be required to perform the Select All action is as follow:

<script type="text/javascript">
    function <code>SelectAll(id)</code>

Code required to add an attribute of cbSelectAll CheckBox is as follow:

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        //Binding GridView with the datasource

        //FillDataTable is a method that will return a DataTable
        //filled with some rows (code available in download)
        this.GridView1.DataSource = FillDataTable();
        this.GridView1.DataBind();
    }
}

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.Header)
    {
        //Find the checkbox control in header and add an attribute
        ((CheckBox)e.Row.FindControl("cbSelectAll")).Attributes.Add("onclick", "javascript:SelectAll('" +
                ((CheckBox)e.Row.FindControl("cbSelectAll")).ClientID + "')");
    }
}

Before clicking the Select All CheckBox
GridCheckBox

After clicking the Select All CheckBox
GridCheckBox

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.

You may also be interested in...

Comments and Discussions

 
GeneralMy vote of 5 Pin
nuaaydh27-May-15 22:26
membernuaaydh27-May-15 22:26 
Questionnested grid view Pin
Member 1021767823-Apr-15 21:00
memberMember 1021767823-Apr-15 21:00 
Generalvery useful thanks Pin
mongoose_za1-Oct-14 0:19
membermongoose_za1-Oct-14 0:19 
QuestionMy vote of 5 Pin
Rahim Lotfi13-Jul-14 11:27
memberRahim Lotfi13-Jul-14 11:27 
GeneralMy vote of 5 Pin
Abhijoy_D6-Mar-13 20:15
memberAbhijoy_D6-Mar-13 20:15 
GeneralMy vote of 5 Pin
vinyasAm24-Sep-12 1:27
membervinyasAm24-Sep-12 1:27 
Answereasy way to check/uncheck Checkboxes in gridview Pin
shilpis12-Jul-12 3:02
membershilpis12-Jul-12 3:02 
GeneralMy vote of 5 Pin
Mico Perez29-Apr-12 21:03
memberMico Perez29-Apr-12 21:03 
GeneralMy vote of 5 Pin
Deepanjan Dey5-Jan-12 2:28
memberDeepanjan Dey5-Jan-12 2:28 
GeneralMy vote of 5 Pin
Nigam Patel3-Jan-12 23:55
memberNigam Patel3-Jan-12 23:55 
GeneralMy vote of 5 Pin
Maverick200921-Jun-11 1:29
memberMaverick200921-Jun-11 1:29 
GeneralMy vote of 5 Pin
Habib201019-Jun-11 20:48
memberHabib201019-Jun-11 20:48 
GeneralMy vote of 5 Pin
Member 431347131-May-11 23:07
memberMember 431347131-May-11 23:07 
GeneralMy vote of 5 Pin
Thrinath reddy24-Feb-11 23:53
memberThrinath reddy24-Feb-11 23:53 
GeneralMy vote of 4 Pin
shreekanth Gaanji19-Feb-11 20:32
membershreekanth Gaanji19-Feb-11 20:32 
GeneralMy vote of 5 Pin
brijesh vaidya21-Dec-10 18:41
memberbrijesh vaidya21-Dec-10 18:41 
GeneralMy vote of 1 Pin
sourabh patni27-Sep-10 0:20
membersourabh patni27-Sep-10 0:20 
GeneralMy vote of 5 Pin
AMIT_BHAGAT12-Aug-10 22:03
memberAMIT_BHAGAT12-Aug-10 22:03 
GeneralI made an improvement Pin
Member 6988515-Feb-10 9:50
memberMember 6988515-Feb-10 9:50 
GeneralGridview Validation help is needed Pin
Rameez Raja24-Nov-09 18:55
memberRameez Raja24-Nov-09 18:55 
Generalwell done Pin
Donsw18-Apr-09 10:37
memberDonsw18-Apr-09 10:37 
Generalcheckbox not getting selected Pin
svknair27-Jan-09 19:49
membersvknair27-Jan-09 19:49 
GeneralRe: checkbox not getting selected Pin
farazsk1127-Jan-09 23:33
memberfarazsk1127-Jan-09 23:33 
GeneralGreat Snippet Pin
Mico_Perez_II12-Jan-09 21:36
memberMico_Perez_II12-Jan-09 21:36 
GeneralRe: Great Snippet Pin
farazsk1112-Jan-09 23:12
memberfarazsk1112-Jan-09 23:12 
GeneralRe: Great Snippet Pin
Mico_Perez_II12-Jan-09 23:51
memberMico_Perez_II12-Jan-09 23:51 
GeneralRe: Great Snippet Pin
farazsk1113-Jan-09 0:03
memberfarazsk1113-Jan-09 0:03 
GeneralRe: Great Snippet Pin
Mico_Perez_II13-Jan-09 0:33
memberMico_Perez_II13-Jan-09 0:33 
GeneralRe: Great Snippet Pin
farazsk1113-Jan-09 18:11
memberfarazsk1113-Jan-09 18:11 
GeneralCheck/uncheck CheckBox in a GridView using Javascript Pin
ricomambo4-Jan-09 15:52
memberricomambo4-Jan-09 15:52 
GeneralRe: Check/uncheck CheckBox in a GridView using Javascript Pin
farazsk1112-Jan-09 23:11
memberfarazsk1112-Jan-09 23:11 
General[Message Deleted] Pin
bachijvs29-Oct-08 2:39
memberbachijvs29-Oct-08 2:39 
GeneralRe: How to Check Folder existance Pin
farazsk1129-Oct-08 3:04
memberfarazsk1129-Oct-08 3:04 
GeneralUn checking the header checkbox [modified] Pin
bachijvs9-Sep-08 21:26
memberbachijvs9-Sep-08 21:26 
GeneralRe: Un checking the header checkbox Pin
farazsk119-Sep-08 22:41
memberfarazsk119-Sep-08 22:41 
GeneralRe: Un checking the header checkbox Pin
bachijvs10-Sep-08 1:14
memberbachijvs10-Sep-08 1:14 
GeneralRe: Un checking the header checkbox Pin
mihhim26-May-09 3:35
membermihhim26-May-09 3:35 
GeneralImprovements to your JavaScript [modified] Pin
Nick Taylor1-Apr-08 3:04
memberNick Taylor1-Apr-08 3:04 

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