Click here to Skip to main content
Click here to Skip to main content
Alternative Tip

Select all checkbox in the data grid

, 20 Apr 2011
Rate this:
Please Sign up or sign in to vote.
DescriptionS...

Description

Select/Clear all Check-boxes in grid. Here using GridView. Additionally it shows the count in display how much Check-boxes selected in Grid while selection.

Code

<html>
<head  runat="server">
    <title>Select/Clear Checkboxes in Grid</title>
    <script type="text/javascript">
        var TotalChkBx;
        var Counter;
        
        window.onload = function()
        {
            //Get total no. of CheckBoxes in side the GridView.
            TotalChkBx = parseInt('<%= this.gvCheckboxes.Rows.Count %>');
            //Get total no. of checked CheckBoxes in side the GridView.
            Counter = 0;
            RowCount(Counter);
        }
        
        function HeaderClick(CheckBox)
        {
            //Get target base & child control.
            var TargetBaseControl = document.getElementById('<%= this.gvCheckboxes.ClientID %>');
            var TargetChildControl = "chkBxSelect";
            
            //Get all the control of the type INPUT in the base control.
            var Inputs = TargetBaseControl.getElementsByTagName("input");
            
            //Checked/Unchecked all the checkBoxes in side the GridView.
            for (var n = 0; n < Inputs.length; ++n) 
            {
                if (Inputs[n].type == 'checkbox' && Inputs[n].id.indexOf(TargetChildControl, 0) >= 0) 
                {
                    Inputs[n].checked = CheckBox.checked;
                }
                //Reset Counter
                Counter = CheckBox.checked ? TotalChkBx : 0;
            }
            RowCount(Counter);
        }
        
        function ChildClick(CheckBox, HCheckBox) {
            //get target base & child control.
            var HeaderCheckBox = document.getElementById(HCheckBox);
                     
            //Modifiy Counter;
            if (CheckBox.checked && Counter < TotalChkBx) {
                Counter++;
            }
            else if (Counter > 0) {
                Counter--;
            }   
            //Change state of the header CheckBox.
            if (Counter < TotalChkBx) {
                HeaderCheckBox.checked = false;
            }
            else if (Counter == TotalChkBx) {
                HeaderCheckBox.checked = true;
            }
            RowCount(Counter);
        }
 
        function RowCount(Counter) 
        {
            //To display the count how much Check-boxes selected in Grid while selection
            document.getElementById('divSelectedRows').innerHTML = 'Selected Rows : ' + Counter;
        }
    </script>
 
</head>
<body>
    <form id="form1"  runat="server">
        <div id="divSelectedRows">Selected Rows : 0</div>
        <asp:gridview id="gvCheckboxes" runat="server" autogeneratecolumns="False" onrowcreated="gvCheckboxes_RowCreated">
            <columns>
                <asp:boundfield headertext="S.No" datafield="SNo">
                <asp:templatefield headertext="Select">
                    <itemtemplate>
                        <asp:checkbox id="chkBxSelect" runat="server" />
                    </itemtemplate>
                    <headertemplate>
                        <asp:checkbox id="chkBxHeader" onclick="javascript:HeaderClick(this);" runat="server" />
                    </headertemplate>
                <asp:templatefield>
            </columns>
        <asp:gridview>
    </form>
</body>
</html>
    protected void Page_Load(object sender, EventArgs e)
    {        
        if (!IsPostBack)
        {
            BindGridView();
        }
    }
 
    protected void BindGridView()
    {
        gvCheckboxes.DataSource = GetDataSource(1000);//1000 Rows
        gvCheckboxes.DataBind();
    }
 
    protected DataTable GetDataSource(int Rows)
    {
        DataTable dTable = new DataTable();
        DataRow dRow = null;
        dTable.Columns.Add("SNo");
        for (int n = 1; n <= Rows; ++n)
        {
            dRow = dTable.NewRow();
            dRow["SNo"] = n + ".";
            dTable.Rows.Add(dRow);
            dTable.AcceptChanges();
        }
        return dTable;
    }
 
    protected void gvCheckboxes_RowCreated(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            CheckBox chkBxSelect = (CheckBox)e.Row.Cells[1].FindControl("chkBxSelect");
            CheckBox chkBxHeader = (CheckBox)this.gvCheckboxes.HeaderRow.FindControl("chkBxHeader");
            chkBxSelect.Attributes["onclick"] = string.Format("javascript:ChildClick(this,'{0}');", chkBxHeader.ClientID);
        }
    }

Browser Compatibility

I have tested this script in the following Web browsers:
  • Internet Explorer
  • Mozilla Firefox
  • Google Chrome
  • Safari
  • Opera

Reference

I want to acknowledge this author[^] for his article[^]. Thanks to him. Actually I have changed/reduced things(in his code) & posted here as a Tip/Trick.

License

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

About the Author

thatraja
Web Developer
India India
Programmer | Dude | ||||||
 
About him & his blog? check out here. Currently he's updating the site, he'll return soon there with more things*.
 
In Codeproject, he posted a blogpost & more than couple of Tip/Tricks, hope he'll write more soon.
 
Favorite techs are MVC, WCF, Mobile, HTML5, CSS3, jQuery, etc.,
 
His hobbies are watching movies, CP, being alone, etc., But now he's working on something*.
 
* - SCAMP???
Follow on   Twitter   Google+   LinkedIn

Comments and Discussions

 
GeneralNice one. Helpful tip indeed! Pinmembera.pranav25-Apr-11 21:41 
GeneralReason for my vote of 5 Nice Tip. :thumbsup: PinmvpKunal_Chowdhury20-Apr-11 21:14 
GeneralRe: BTW, don't forget to test it in IE 10 too. The platform prev... PinmvpKunal_Chowdhury20-Apr-11 21:16 
GeneralReason for my vote of 5 It's Nice, BTW, GIT thread drove me ... PinmemberGandalf - The White20-Apr-11 19:03 
GeneralI use the same method to Select All which is OK. But it is O... PinmemberVenkatesh Mookkan20-Apr-11 16:34 

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
Web04 | 2.8.140718.1 | Last Updated 20 Apr 2011
Article Copyright 2011 by thatraja
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid