For client side checkbox check all or uncheck all in girdview

 

Gridview header checkbox select and deselect all rows using client side JavaScript and server side C#

In this article, I will show you how to add checkbox in gridview header template then select and deselect all rows in gridview using clients side JavaScript and server side as well. 

Introduction

Adding checkbox in gridview header template and select/deselect all rows is a common requirement in most of the asp.net projects and frequently asked questions also. Here I will explain how to add checkbox in header template of gridview and select/deselect all rows using client side javascript and server side code.

Add Checkbox in Gridview header template

Create the asp.net project and drag the gridview control then format as likes below.

Using HeaderTemplate of gridview I had added checkbox and also added in Itemtemplate of same column.

Select and deselect using Client side

I’m loading the few sample employee records in gridview to select/deselect all rows. Below javascript CheckAllEmp function will do select and deselect when check and uncheck in header checkbox. Call this function in gridview headertemplate, checkbox onclick event as shown above.

Above javascript code will get gridview client id and loop the each row and get the checkbox id which is available in itemTemplate and make it select/deselect rows. This is the one of the way using client side script.

Select and deselect using Server side

Same functionality we can able to do with server side also. To do this make the changes in HeaderTemplate as like below.

Make it autopostback as true and create OnCheckedChanged event in checkbox and add the below code in chkboxSelectAll_CheckedChanged event in code behind part.

protected void chkboxSelectAll_CheckedChanged(object sender, EventArgs e)
        {
            CheckBox ChkBoxHeader = (CheckBox)GridVwHeaderChckboxSrvr.HeaderRow.FindControl("chkboxSelectAll");
            foreach (GridViewRow row in GridVwHeaderChckboxSrvr.Rows)
            {
                CheckBox ChkBoxRows = (CheckBox)row.FindControl("chkEmp");
                if (ChkBoxHeader.Checked == true)
                {
                    ChkBoxRows.Checked = true;
                }
                else
                {
                    ChkBoxRows.Checked = false;
                }
            }
        }

Above checked changed event will get the header checkbox id and if header checkbox is checked then find all rows checkbox id and make it all select else deselect all rows

For Jquery select and deselect

 function CheckAll(obj) {
   $('#<%=grdData.ClientID %> tbody tr td input:checkbox').attr('checked', obj.checked);
}

  function childclick() {
            if ($("#<%=grdData.ClientID %> input[name$='chkuser']").length == $("#<%=grdData.ClientID %> input[name$='chkuser']:checked").length) {
                $("#<%=grdData.ClientID %> input[name$='chkheaduser']").attr('checked', true);
            } else {
                $("#<%=grdData.ClientID %> input[name$='chkheaduser']").attr('checked', false);
            }
        }

For that grid have this one