Use header checkbox in GridView in ASP.NET

Here I am going to give you a very easy steps to use the checkbox in the header of the Gridview in ASP.NET.




Steps:
1. I have created a class “Customer” and fill the gridview with the collection of customers.

public class Customer

{



    int id;

    string name;

    string city;



    public string City

    {

        get { return city; }

        set { city = value; }

    }



    public string Name

    {

        get { return name; }

        set { name = value; }

    }



    public int Id

    {

        get { return id; }

        set { id = value; }

    }



    public Customer(int customerID, string customerName, string customerCity)

    {



        id = customerID;

        name = customerName;

        city = customerCity;

    }



}

2.Created a gridview in the default.aspx page

 <asp:GridView ID="dgridCustomer" runat="server" AutoGenerateColumns="false" Width="592px">

 <Columns>

   <asp:TemplateField>

    <HeaderTemplate>

       

      <input type="checkbox" class="chkHeader" id="HeaderCheckBox"  onclick="javascript:Check(this)"                                        name="ItemCheckBox" runat="Server" />

    </HeaderTemplate>

       <ItemTemplate>

         <input type="checkbox" value='<%# DataBinder.Eval(Container.DataItem, "Id") %>' class="chkItem"

         id="ItemCheckBox" name="ItemCheckBox" runat="Server" />

       </ItemTemplate>

    </asp:TemplateField>

    <asp:TemplateField HeaderText="Name">

        <ItemTemplate>

           <%# DataBinder.Eval(Container.DataItem, "Name") %>

        </ItemTemplate>

    </asp:TemplateField>

    <asp:TemplateField HeaderText="City">

        <ItemTemplate>

          <%# DataBinder.Eval(Container.DataItem, "City") %>

        </ItemTemplate>

    </asp:TemplateField>

  </Columns>

</asp:GridView>

3.To fill the gridview following functions has been used in default.aspx.cs file

protected void Page_Load(object sender, EventArgs e)

    {



        lblMsg.Visible = false;



        if (IsPostBack) return;



        FillCustomer();



    }



    private void FillCustomer()

    {

        List obCustomers = new List();



        obCustomers = GetAllCustomers();



        Session["Customers"] = obCustomers;



        dgridCustomer.DataSource = obCustomers;

        dgridCustomer.DataBind();

    }



    private List GetAllCustomers()

    {

        List obCustomers = new List();



        Customer obCustomer = new Customer(1, "name1", "city1");

        obCustomers.Add(obCustomer);



        obCustomer = new Customer(2, "name2", "city2");

        obCustomers.Add(obCustomer);



        obCustomer = new Customer(3, "name3", "city3");

        obCustomers.Add(obCustomer);



        obCustomer = new Customer(4, "name4", "city4");

        obCustomers.Add(obCustomer);



        obCustomer = new Customer(5, "name5", "city5");

        obCustomers.Add(obCustomer);



        return obCustomers;



    }

4.When header checkbox of the gridview is clicked then all the item checkboxes should be checked and if header checkbox is unchecked then all the item checkboxes should be unchecked. To do this I have created a javascript function and added in the default.aspx page.

 function Check(varchk)

            {



               var objInputs = document.getElementsByTagName('input')

               for(i=0;i               {

                  if(varchk.checked)

                    {

                        if(objInputs[i].className==='chkItem')

                        {

                            objInputs[i].checked=true;

                        }

                    }

                    else

                    {

                        if(objInputs[i].className==='chkItem')

                        {

                            objInputs[i].checked=false;

                        }

                    }

               }

            }

5.Remove all the checked record from the gridview, the following method has been used
in the Remove button.

 protected void btnRemove_Click(object sender, EventArgs e)

    {

        List obCollection = (List)Session["Customers"];



        foreach (GridViewRow row in dgridCustomer.Rows)

        {

            System.Web.UI.HtmlControls.HtmlInputCheckBox chk = (System.Web.UI.HtmlControls.HtmlInputCheckBox)dgridCustomer.Rows[row.RowIndex].FindControl("ItemCheckBox");



            if (chk.Checked)

            {

                Customer obCustomer = obCollection.Find(delegate(Customer obj) { return obj.Id == Convert.ToInt32(chk.Value); });



                obCollection.Remove(obCustomer);



                lblMsg.Visible = true;



                lblMsg.Text = "Customer information deleted successfully.";

            }

        }



        dgridCustomer.DataSource = obCollection;

        dgridCustomer.DataBind();



    }

Below method is used to find the checked item from the collection.

Customer obCustomer = obCollection.Find(delegate(Customer obj) { return obj.Id == Convert.ToInt32(chk.Value); });

Download :