How to add checkbox header column to check all when checked? – Jquery

First up, how to add "any" control to the header.

It works very much like say any item template.

Start a "item templte", and INSIDE that, drop in a header template.

So, we have this now:

<h3>Select Hotels</h3>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
    DataKeyNames="ID" Width="50%" CssClass="table table-hover">
    <Columns>
        <asp:BoundField DataField="FirstName" HeaderText="FirstName" />
        <asp:BoundField DataField="LastName" HeaderText="LastName" />
        <asp:BoundField DataField="HotelName" HeaderText="HotelName" />
        <asp:BoundField DataField="City" HeaderText="City" />
        <asp:BoundField DataField="Description" HeaderText="Description" />

        <asp:TemplateField
            ItemStyle-HorizontalAlign="Center"
            HeaderStyle-Width="70px">
            <HeaderTemplate>
                <div style="text-align: center">
                    All<br />
                    <asp:CheckBox ID="chkAll" runat="server"
                        OnCheckedChanged="chkAll_CheckedChanged"
                        AutoPostBack="true" />
                </div>
            </HeaderTemplate>
            <ItemTemplate>
                <asp:CheckBox ID="chkSel" runat="server" />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

And we wired up a click event for the check box. So, the code is now this:

    protected void chkAll_CheckedChanged(object sender, EventArgs e)
    {
        CheckBox chkHeaderCheck = (CheckBox)sender;
        
        foreach (GridViewRow gRow in GridView1.Rows)
        {
            CheckBox ckRowSel = (CheckBox)gRow.FindControl("chkSel");
            ckRowSel.Checked = chkHeaderCheck.Checked;
        }
    }

And now we get/see this:

So, above is real clean, VERY easy.

of course, we could do this code 100% client side with JavaScript.

So, now out button (header) has no server side click, nor a post-back.

So, this:

        <asp:TemplateField
            ItemStyle-HorizontalAlign="Center"
            HeaderStyle-Width="70px">
            <HeaderTemplate>
                <div style="text-align: center">
                    All<br />
                        <asp:CheckBox ID="chkHeader" runat="server" 
                            onclick="myheadcheck(this)" />
                </div>
            </HeaderTemplate>
            <ItemTemplate>
                <asp:CheckBox ID="chkSel" runat="server" />
            </ItemTemplate>
        </asp:TemplateField>

And the js code is this: (jQuery)

  <script>

      function myheadcheck(btn) {

          // get the ONE check box, checked, or not???
          var bolChecked = $(btn).is(':checked')

          // now set all check boxes
          MyTable = $('#<%= GridView1.ClientID %>')    // select and get grid
          MyCheckBoxs = MyTable.find('input:checkbox') // select all check boxes in grid
          MyCheckBoxs.each(function () {
              $(this).prop('checked', bolChecked)
          })
      }
  </script>

And now the result is really the same, but no server side post-back.

However, either way? Note the use of the Header template –

And last but not least?

Might as well include the code to load the gv.

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            LoadGrid();
        }
    }
    protected void LoadGrid()
    {
        using (SqlConnection conn = new SqlConnection(Properties.Settings.Default.TEST4))
        {
            string strSQL = "SELECT * FROM tblHotelsA ORDER BY HotelName";
            using (SqlCommand cmdSQL = new SqlCommand(strSQL, conn))
            {
                DataTable rstData = new DataTable();
                conn.Open();
                rstData.Load(cmdSQL.ExecuteReader());
                GridView1.DataSource = rstData;
                GridView1.DataBind();
            }
        }
    }